热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

githubpages+hexo构建自己的网站

一、前期准备gitgit安装地址nodejsnodejs安装地址hexo使用npm安装安装好nodejs以后,进入nodejs安装目录二、Hexo

一、前期准备

git
git安装地址

nodejs
nodejs安装地址

hexo 使用npm安装
安装好nodejs以后,进入nodejs安装目录

二、Hexo

hexo是一款基于Node.js的静态博客框架。
在nodejs安装目录下执行命令

$npm install hexo -g

仅需一步就把 Hexo 本体和所有相依套件安装完毕。

更新hexo到最新版

$npm update hexo -g

查看版本

node -v

v0.12.7

初始化
创建hexo目录,比如E:\hexo ,进入E:\hexo 目录,执行命令

$hexo init

安装依赖包

$npm install

启动服务

$hexo server 

新开启一个gitbash

$ hexo new "My New Post"

刷新http://localhost:4000/。
可以发现已生成了一篇新文章 “My New Post”。

执行下面的命令,将markdown文件生成静态网页。

$ hexo generate

该命令执行完后,会在 E:\hexo\public\ 目录下生成一系列html,css等文件。
编辑需要使用markdown语法

hexo常用命令:http://segmentfault.com/a/1190000002632530

常用命令:
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
简写:
hexo n == hexo newhexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

三、GitHub

注册Github 账号
创建一个新的repository
chenlly99.github.io //注意,名称必须是xxx.github.io 格式,并且xxx必须是GitHub的用户名

编辑_config.yml 在E:\hexo 目录下
deploy:
type: git
repository: git@github.com:chenlly99/chenlly.github.io.git
branch: master

$hexo deploy 如果最后显示
[info] Deploy done: github
说明发布成功

问题1:hexo deploy 命令行没有任何输出,也没有错误。
deploy:标签,在每个冒号后面必须要空格

问题2:
hexo deploy命令显示ERROR Deployer not found : github
解决:
deploy的type改成git,然后运行下npm install hexo-deployer-git –save
再hexo g
hexo d

问题3:
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
FATAL Something’s wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: Host key verification failed.
fatal: Could not read from remote repository.

解决:
先生成key:
登录git bash
$ ssh-keygen -t rsa -C “chenliling99@126.com”
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/Administrator/.ssh/id_rsa):
/c/Users/Administrator/.ssh/id_rsa already exists.
Overwrite (y/n)? y
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/Administrator/.ssh/id_rsa.
Your public key has been saved in /c/Users/Administrator/.ssh/id_rsa.pub.
The key fingerprint is:
02:80:dc:c0:02:25:9b:73:0e:3f:59:fa:ea:d6:35:29 chenliling99@126.com
The key’s randomart image is:
+–[ RSA 2048]—-+
|*+= |
|o* o |
|* . o |
| * + . |
| * ..S |
| oE +. |
| ..o . |
| … |
| oo |
+—————–+

之后会要求确认路径和输入密码,我们这使用默认的一路回车就行。成功的话会在~/下生成.ssh文件夹,进去,打开id_rsa.pub,复制里面的key。

回到github,进入Account Settings,左边选择SSH Keys,Add SSH Key,title随便填,粘贴key。为了验证是否成功,
$ ssh -T git@github.com
Enter passphrase for key ‘/c/Users/Administrator/.ssh/id_rsa’:
Hi chenlly99! You’ve successfully authenticated, but GitHub does not provide shell access.

问题4:执行命令hexo deploy 报如下错误
Error: spawn git ENOENT at exports._errnoException (util.js:746:11) at Process.ChildProcess._handle.onexit (child_process.js:1053:32) at child_process.js:1144:20 at process._tickCallback (node.js:355:11)
添加环境变量:C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\libexec\git-core,这样就解决了问题了。

点击 Github 上项目的 Settings,GitHub Pages,提示Your site is published at http://chenlly99.github.io/
第一次上传网站的话需要等十分钟左右,以后每次更新都能马上打开

四、主题

参考:https://github.com/zippera/lightum

复制主题:

$ git clone https://github.com/zippera/lightum.git themes/lightum

更新主题:
cd themes/lightum
git pull

复制下来以后,修改配置文件
修改Hexo目录下的config.yml配置文件中的theme属性,将其设置为
theme: lightum

五、布局

站点配置用到两个文件,一个是对整站的配置H:\hexo_config.yml,另一个是对主题的配置H:\hexo\themes\light_config.yml,
添加分类、标签云、友情链接widget
修改themes\light_config.yml 增加widgets
widgets:
- search
- category
- tagcloud
- blogroll
在D:\hexo\themes\lightum\layout_widget 分别增加
search.ejs
category.ejs
tagcloud.ejs
blogroll.ejs

参考:http://www.ituring.com.cn/article/23

1、字体

*这些文字显示为斜体*
**这些文字显示为粗体**

2、代码:

$ hexo deploy

3、标题

#表示这是一级标题
##表示这是二级标题
###表示这是三级标题

4、无序列表

- 列表项目 - 列表项目 - 列表项目

5、嵌套列表

- 列表项目      + 列表项目
     + 列表项目
     + 列表项目
- 列表项目

6、有序列表
数字接着一个英文句点

1. Bird
2. McHale
3. Parish

7、连接

URL格式:[图灵社区](http://www.ituring.com.cn)
图片连接
开头加一个惊叹号
![图灵社区](http://www.turingbook.com/Content/img/Turing.Gif)

图片可以是网络图片也可以是本地图片
本地图片建议放在\source\img 目录下。
eg:
![图灵社区](/img/forkme_left_green_007200.png)
或者直接用img标签,同时指定图片大小

<img src="/img/forkme_left_green_007200.png" alt="图灵社区" width="200px" /> 

8、表格
http://www.jianshu.com/p/q81RER

七、写文章

hexo new [layout] “postName” #新建文章
其中layout是可选参数,默认值为post。有哪些layout呢,请到 scaffolds 目录下查看post的layout默认是hexo\scaffolds\post.md
修改scaffolds\post.md的模板样式
title: {{ title }}
date: {{ date }}
tags:
categories:

正文支持markdown格式,建议你先学习一下它的语法。markdown不像html似的一大堆标签,很简单,只有几个符号。
新建、删除或修改文章

文章可以拥有如下属性:
Setting Description Default
layout Layout post或page
title 文章的标题
date 创建日期 文件的创建日期
updated 修改日期 文件的修改日期
comments 是否开启评论 true
tags 标签
categories 分类

八、自定义页面

执行new page命令

$hexo new page "about"

在 hexo\source\ 下会生成 about 目录,里面有个index.md,直接编辑就可以了
然后在themes\light_config.yml 配置
menu:
首页: /
归档: /archives
关于: /about

九、评论框

注册多说地址:
在多说进行注册,获得通用代码。
将通用代码粘贴到themes\light\layout_partial\comment.ejs里面,如下:

<% if ( page.comments){ %>
<section id="comment">
通用代码
section>
<% } %>

十、RSS 阅读

安装插件

$npm install hexo-generator-feed

全局配置文件开启插件
plugins:
- hexo-generator-feed

主题配置文件添加入口
rss: /atom.xml

添加到首页
在themes/light/layout/_partial/header.ejs中,

<li> <a href="/atom.xml">RSSa> li>

十一、网站地图

网站地图,又称站点地图,它就是一个页面,上面放置了网站上需要搜索引擎抓取的所有页面的链接
安装插件

$npm install hexo-generator-sitemap

开启插件
plugins:
- hexo-generator-sitemap

浏览http://localhost:4000/sitemap.xml查看是否生效

十二、统计:

因Google Analytics偶尔被墙,故用百度统计,以 modernist 主题为例,介绍如何添加。
编辑文件 hexo\themes\modernist_config.yml ,增加配置选项:
baidu_tongji: true

新建文件 hexo\themes\modernist\layout_partial\baidu_tongji.ejs ,内容如下:
<% if (theme.baidu_tongji){ %><% } %>
注册并登录百度统计获取你的统计代码。

编辑文件 hexo\themes\modernist\layout_partial\head.ejs ,在 [/head] 之前增加:
<%- partial(‘baidu_tongji’) %>

重新生成并部署你的站点。
不出意外的话,在你的站点的每个页面的左上角都会看到一个恶心的百度LOGO。你只能在『百度统计首页->网站列表->获取代码->系统管理设置->统计图标设置->显示图标』,把那个勾去掉。

十三、域名

(1)、进入source文件夹,创建名为CNAME的文件,编辑:
chenlly.com
(2)、设置DNS解析
本人首先在阿里云上购买了一个域名,
登录域名控制台,添加域名解析,github.com两个ip地址分别是192.30.252.154,192.30.252.153

打开浏览器输入
chenlly.com

OK


推荐阅读
  • Windows下配置PHP5.6的方法及注意事项
    本文介绍了在Windows系统下配置PHP5.6的步骤及注意事项,包括下载PHP5.6、解压并配置IIS、添加模块映射、测试等。同时提供了一些常见问题的解决方法,如下载缺失的msvcr110.dll文件等。通过本文的指导,读者可以轻松地在Windows系统下配置PHP5.6,并解决一些常见的配置问题。 ... [详细]
  • 成功安装Sabayon Linux在thinkpad X60上的经验分享
    本文分享了作者在国庆期间在thinkpad X60上成功安装Sabayon Linux的经验。通过修改CHOST和执行emerge命令,作者顺利完成了安装过程。Sabayon Linux是一个基于Gentoo Linux的发行版,可以将电脑快速转变为一个功能强大的系统。除了作为一个live DVD使用外,Sabayon Linux还可以被安装在硬盘上,方便用户使用。 ... [详细]
  • 延迟注入工具(python)的SQL脚本
    本文介绍了一个延迟注入工具(python)的SQL脚本,包括使用urllib2、time、socket、threading、requests等模块实现延迟注入的方法。该工具可以通过构造特定的URL来进行注入测试,并通过延迟时间来判断注入是否成功。 ... [详细]
  • 网络请求模块选择——axios框架的基本使用和封装
    本文介绍了选择网络请求模块axios的原因,以及axios框架的基本使用和封装方法。包括发送并发请求的演示,全局配置的设置,创建axios实例的方法,拦截器的使用,以及如何封装和请求响应劫持等内容。 ... [详细]
  • 本文讨论了在使用PHP cURL发送POST请求时,请求体在node.js中没有定义的问题。作者尝试了多种解决方案,但仍然无法解决该问题。同时提供了当前PHP代码示例。 ... [详细]
  • EPICS Archiver Appliance存储waveform记录的尝试及资源需求分析
    本文介绍了EPICS Archiver Appliance存储waveform记录的尝试过程,并分析了其所需的资源容量。通过解决错误提示和调整内存大小,成功存储了波形数据。然后,讨论了储存环逐束团信号的意义,以及通过记录多圈的束团信号进行参数分析的可能性。波形数据的存储需求巨大,每天需要近250G,一年需要90T。然而,储存环逐束团信号具有重要意义,可以揭示出每个束团的纵向振荡频率和模式。 ... [详细]
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • 本文介绍了在Linux下安装Perl的步骤,并提供了一个简单的Perl程序示例。同时,还展示了运行该程序的结果。 ... [详细]
  • 本文介绍了在Mac上搭建php环境后无法使用localhost连接mysql的问题,并通过将localhost替换为127.0.0.1或本机IP解决了该问题。文章解释了localhost和127.0.0.1的区别,指出了使用socket方式连接导致连接失败的原因。此外,还提供了相关链接供读者深入了解。 ... [详细]
  • 本文介绍了南邮ctf-web的writeup,包括签到题和md5 collision。在CTF比赛和渗透测试中,可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型,可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]
  • 本文介绍了在Windows环境下如何配置php+apache环境,包括下载php7和apache2.4、安装vc2015运行时环境、启动php7和apache2.4等步骤。希望对需要搭建php7环境的读者有一定的参考价值。摘要长度为169字。 ... [详细]
  • CentOS 6.5安装VMware Tools及共享文件夹显示问题解决方法
    本文介绍了在CentOS 6.5上安装VMware Tools及解决共享文件夹显示问题的方法。包括清空CD/DVD使用的ISO镜像文件、创建挂载目录、改变光驱设备的读写权限等步骤。最后给出了拷贝解压VMware Tools的操作。 ... [详细]
  • Windows 7 部署工具DISM学习(二)添加补丁的步骤详解
    本文详细介绍了在Windows 7系统中使用部署工具DISM添加补丁的步骤。首先需要将光驱中的安装文件复制到指定文件夹,并进行挂载。然后将需要的MSU补丁解压并集成到系统中。文章给出了具体的命令和操作步骤,帮助读者完成补丁的添加过程。 ... [详细]
  • 【shell】网络处理:判断IP是否在网段、两个ip是否同网段、IP地址范围、网段包含关系
    本文介绍了使用shell脚本判断IP是否在同一网段、判断IP地址是否在某个范围内、计算IP地址范围、判断网段之间的包含关系的方法和原理。通过对IP和掩码进行与计算,可以判断两个IP是否在同一网段。同时,还提供了一段用于验证IP地址的正则表达式和判断特殊IP地址的方法。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
author-avatar
潇洒看不惯_185
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有