搭建个人博客--详细教程

GitHub Pages免费提供300M不限流量的空间，提供给全球用户搭建公共静态页面托管服务。经过各种找资料，踩过各种坑，终于搭建好了Hexo。这篇文章记录了利用GitHub Pages搭建个人博客的所有过程。

配置环境

Node
作用：生成静态页面。
安装步骤：
1.在Node.js官网下载相应平台的最新版本。
2.点击8.9.1LTS下载至E盘新建的blogresoft文件夹中。
3.双击.msi文件安装，点击next即可，自定义安装地址为E:\blogresoft\node。
Git
作用：将本地的Hexo内容提交到GitHub上去。
安装步骤：
1.在Git官网下载同电脑操作系统类型相同的版本。
2.例如：点击64-bit Git for Windows Setup下载至E盘的blogresoft文件夹中。
3.双击.msi文件安装，点击next即可，自定义安装地址为E:\blogresoft\git。
申请GitHub账号
没有GitHub账号的话，需要自己去注册一个，注册过程参见申请GitHub账号。注意：请记住自己的账号、邮箱和密码。
配置SSH Keys
作用：配置SSH Keys以后，每次对自己的博客有所改动，提交的时候，不需要再手动输入GitHub的账号和密码。
配置过程：
在E:\blogresoft\git\Git文件夹下双击git-bash.exe，输入以下命令，检查是否已经存在.ssh文件夹：
1
$ ls -al ~/.ssh
如果不存在，执行如下代码，生成.ssh文件夹：
1
$ mkdir .ssh
然后执行如下代码，进入.ssh文件夹：
1
$ cd .ssh
输入如下代码：
1
2
3
$ ssh-keygen -t rsa -C"你的GitHub登录邮箱"
输入公钥对保存文件名为：id_rsa 按回车键
提示是否使用长密码，按回车，继续按回车，不使用
将ssh公钥部分添加到GitHub，.ssh文件夹下后缀名为.pub的文件是公钥，右键打开方式选择写字板打开，复制其中所有的内容。在GitHub网站右上角点击setting。点击左侧SSH and GPG keys，点击右上角New SSH key，在Key中粘贴.ssh文件夹下后缀名为.pub的文件的所有内容，点击Add SSH key添加公钥，此时公钥状态为灰色。
在E:\blogresoft\git\Git文件夹下双击git-bash.exe，输入以下命令：
1
2
$ git config --global user.name "username"
$ git config --global user.email "email"
注释：username为注册GitHub时的账户名，email为注册GitHub时的邮箱。
输入如下命令，测试SSH是否配置成功：
1
2
$ ssh -T git@github.com
出现提示，输入yes回车，出现欢迎提示
此时回到SSH and GPG keys处，公钥状态变为绿色。

新建仓库

在Git上新建一个仓库
在GitHub上新建一个仓库新建仓库，并取名为your_username.github.io，其中your_username是您自己的账号名。

在本地写博客
在E:\blogresoft文件夹下新建一个文件夹gittest，新建一个index.html文件，并输入一下内容

<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <p>你好！这是我的第一篇博客</p>
  </body>
</html>

用Git把index.html提交到GitHub上,在cmd中输入以下命令
1
2
3
4
5
# git init
# git add index.html
# git commit -m "我的第一篇博客"
# git remote add origin https://github.com/your_username/your_username.github.io.git
# git push -u origin master
在浏览器中输入your_username.github.io即可访问。
本质：在GitHub中创建的your_username.github.io仓库中master分支中的静态文件可以被直接访问。理论上，依据这种方法我们就可以开始构建自己的博客了，但是我们只是想写文章，而这种原始的方式除此之外还需要写HTML、CSS甚至JS文件，显然太过繁琐。为此出现了很多框架，帮助我们专注于博客本身即写文章，而无需去考虑怎么生成静态文件。Hexo就是这样一款基于Node.js的框架。

安装Hexo

安装Hexo步骤
在E:\blogresoft\git\Git文件夹下双击git-bash.exe

输入以下命令,安装hexo，需要等待半分钟：
$ npm install -g hexo
在E盘下新建博客文件夹hexo，并切换至hexo工作目录
$ cd hexo
初始化博客文件夹，需要等待几分钟
$ hexo init
安装hexo的扩展插件
$ npm install
安装其它插件
$ npm install hexo-deployer-git -save
$ npm install hexo-renderer-ejs -save
$ npm install hexo-renderer-stylus -save
$ npm install hexo-render-marked -save
生成静态页面
$ hexo g
开启本地服务器
$ hexo s

打开浏览器，就可以在localhost:4000看到刚刚创建的博客了。

部署Hexo

修改配置
修改站点配置文件E:\hexo_config.yml，修改deploy项的内容，如下所示：
```
# Deployment 注释
## Docs: https://hexo.io/docs/deployment.html
deploy:
# 类型
type: git
# 仓库
repo:git@github.com:xuezhisd/xuezhisd.github.io.git
# 分支
branch: master
```
注意：
1.type: git中的冒号后面有空格。
2.将git@github.com:xuezhisd/xuezhisd.github.io.git中的用户名换成自己的用户名 git@github.com:github_username/github_username.github.io.git。
3.必须是 git，不能为github。
4.repo不要写成reposority。

部署Hexo
输入下面的命令将Hexo博客部署到GitHub中：

清空静态页面
$ hexo clean
生成静态页面
$ hexo g
执行如下命令才能使用git部署
$ npm install hexo-deployer-git -save
部署
hexo d

打开网页，输入你的GitHub网址，打开GitHub上托管的博客。

问题解决
出现hexo -d报错的解决方案
1.删除你在E:\hexo下面的.deploy_git隐藏文件夹，显示隐藏文件夹方法
2.在E:\blogresoft\git\Git文件夹下双击git-bash.exe，输入如下代码：
1
2
3
$ cd e
$ cd hexo
$ git config --global core.autocrlf false
3.重新部署Hexo
1
2
3
$ hexo clean
$ hexo g
$ hexo d
4.打开自己的网址，验证是否部署成功

其它补充

Git基本常用命令

创建一个XX目录:
$ mkdir XX
把当前的目录变成可以管理的git仓库，生成隐藏的.git文件:
$ git init 
把XX文件添加到暂存区去:
$ git add XX
提交文件，-m后面是注释:
$ git commit -m "XX"
关联一个远程库，yourgithubname需要替换成你的github账户名:
$ git remote add origin git@github.com:your_username/test.git
把当前master分支推送到远程库:
$ git push -u origin master

更换主题
一般而言，由于Hexo默认主题（E:\hexo\themes下的landscape主题）比较简陋，我们还可以选择其他主题，比如本博客选择的NexT主题。更换主题为NexT的详细过程请参见NexT文档。
注意：打开.yml文件以及.md文件时，要使用例如：Sublime Text软件，不能直接用记事本打开，可能会引起中文乱码的问题。
写博客
创建博客文章：在E:\hexo\source中的_posts文件夹中新建博客文章，后缀是.md。打开刚刚新建的.md文件就可以开始写博客了！除了在文章开头部分的一些参数，比如标题（title: ）、创建时间（date: ）等，正文部分使用Markdown格式书写，可参考Markdown语法。
注意：NexT默认主页显示文章的全部内容，这对于有些很长的文章来说非常不美观，建议主页仅显示文章的摘要。
1
2
3
在合适的位置插入以下内容作为分隔符

分隔符以前的内容将会在索引页上显示为摘要
友情提示：
1.写文章的过程中可以启动Hexo本地站点，并开启调试模式（即加上 –debug），整个命令是：
1
$ hexo s --debug
在服务启动的过程，注意观察命令行输出是否有任何异常信息，如果你碰到问题，这些信息将帮助他人更好的定位错误。当命令行输出中提示出：
1
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
此时即可使用浏览器访问localhost:4000，检查站点是否正确运行。
2.写好文章之后，输入以下命令，即可在自己的GitHub网址上看到新写的博客了：
1
2
3
4
$ cd e:
$ cd hexo
$ hexo g
$ hexo d
3.在博客中用markdown插入表格:
第一行写表格的标题行，写法是|列标题|列标题|
第二行固定写|-|-|，前两行这样写，就可以被识别为一个markdown表格
表格后面各行，也是用|分隔，和第一行数目相同
注意：表格的最后一行之后要空一行，才能继续写其它内容
1
2
3
4
|姓名|年龄|
|-|-|
|张三|25|
|李四|23|
4.在博客中用markdown插入图片
1> 将_config.yml中的post_asset_folder:false改为post_asset_folder:true
2> 在source文件夹下新建文件夹，并命名为img
3> 插入图片的语法如下，其中ATA代表图片名称，应替换为需要插入的图片名：
1
![](/img/ATA.jpg)
5.在博客中用markdown插入空格或回车
1
2
3
4
插入空格语法：
 
插入回车语法：
</br>

至此，搭建博客以及写博客时相关配置的介绍已经全部完成，希望这篇博文对你搭建博客的过程有所帮助。同时感谢侯俊耀师兄的帮助以及韩春师兄的博客文章–借助GitHub Pages搭建博客。

相关概念

配置环境

新建仓库

安装Hexo

部署Hexo

其它补充