1. 前言
最近想用博客来记录一下自己的学习过程，以前都是用有道云记笔记，每次查看笔记都需要登录，而且笔记仅自己可见。因此，用博客记笔记是个不错的选择，它不仅有一个好看的界面，而且能用浏览器随时访问，很方便。最重要的一点是它能被更多的人看到，如果你写的东西正好对别人有帮助，你会发现这将是一件很有成就感的事。大家都知道，学习最好的方法就是一个输入和输出的过程，如果只有输入而没有输出，是永远学不好的，而博客恰好是一种很好的输出工具。我们在写博客的时候其实就是在给别人讲解的过程，只有给别人讲清楚了，我们才真正学会了。好吧~ 扯远了，回归正题，那究竟用什么博客好呢？我观察了一下网上的各大博客平台，像CSDN、博客园和简书等都是不错的平台，但是我不喜欢，因为广告很烦人，界面不好看。那么只剩下两种方法了，自己搭建一个博客网站和用 github 搭建博客网站（其实还有一种方法就是你可以注册一个公众号来记录自己的学习过程，感兴趣的同学也可以尝试下）。自己搭建一个博客网站的话对于学生的我来说成本太高，虽然网上有很多博客模板，但是我觉得太浪费时间了，所以直接 pass 掉。当然，感兴趣的同学可以自行尝试，我这里主要介绍第二种方法，用 github 搭建个人博客。那为什么用它呢？大家应该都知道 github 是全球最大的同性交友网站，也是每个程序猿必备的网站，上面有很多优秀的开源项目值得我们学习，所以选他准没错啦。并且用 github 搭建博客的好处就是不用花一分钱就可以搭建一个自由的个人博客，不需要什么服务器也不需要什么后台，博客内容也可以轻松打包，发布到其它平台。好了，废话不多说，接下来就让我们一起用 github 搭建我们的个人博客。
2. 准备工作
2.1 注册 github 帐号
用 github 搭建博客肯定得先有一个 github 帐号，没有的同学可以去官网注册一个，至于怎么注册就不用多说了。注意：注册的邮箱一定要验证，否则会影响后续的使用。还有国内访问 github 会比较慢，所以建议大家用 google 浏览器访问，这样访问会比较快一点。
github 官网地址： https://github.com/
2.2 安装 node.js
官网下载地址：node.js
进入官网点击如下图红框圈起的内容自动下载即可
如果官网下载太慢，也可以进入 node.js 中文网下载
中文网下载地址：node.js 中文网
下载完成后点击安装包进行安装，一路默认 next ，最后点击 install 安装即可。
安装完毕之后，快捷键 win + R ，在弹出的运行框中输入 cmd，回车，然后在 cmd 中输入 node -v ，出现下图 node.js 的版本号表示安装成功。
值得注意的是，node.js 安装成功后系统会默认配置环境变量，所以我们不用手动配置环境变量。如果你输入 node -v 之后提示不是内部命令，那么就是你的环境变量出了问题，此时可以打开系统环境变量查看配置是否正确。
在 win10 的搜索框中输入编辑系统环境变量即可，你也可以用其它方法打开。
这里一定要确保 node.js 环境变量中的路径和你安装 node.js 的目录路径一样，否则后面会出现很多问题。我就是手贱将 node.js 的安装目录名改了，导致后面出现了很多问题。因此，安装成功后千万不要更改安装目录的目录名，并且安装目录名最好不要有中文。
2.3 安装 git
官网下载地址：git
进入官网
点击上图右边红框的内容，进入以下界面，此时浏览器已经开始下载，你也可以自行选择下载。
这里下载可能会很慢，我的是等了很长时间才下好的。实在不想等的同学也可以用我的，我的操作系统：win10 64位，git 安装版本为 Git-2.22.0-64-bit.exe（2019.7的版本）
百度网盘下载链接：https://pan.baidu.com/s/14BpYHMIF3K9QG9boVX7bdA
提取码：r7p2
下载好之后点击安装包进行安装，一路默认 Next，最后点击 Install 即可。注意：不同版本安装过程可能存在一些差异，不过影响不大，这里只以我的版本为例。
安装好之后在桌面点击鼠标右键，出现如下界面，你会发现多了两个东西。
此时说明 git 已安装成功，如果你不放心，也可以打开 cmd ，然后输入 git，显示如下内容说明安装成功。
准备工作大概就这些了，最后在说明一下本文所使用的环境：
- Windows 10
- node.js 版本 10.16.0
- git 版本 2.22.0
- hexo 版本 3.9.0
3. 创建 github pages
首先登录我们注册好的 github 帐号，登陆后新建一个仓库
然后填写仓库的名称和描述，这里一定要注意仓库名称的格式：你的用户名.github.io，你的用户名就是你注册时填的用户名。描述属于可选项，填完点击创建仓库即可，描述就是你对该仓库的描述，后面可以再填，不影响创建。
创建之后会进入以下界面，然后点击 Settings
点击 Settings 之后进入如下界面
在该页面往下翻，找到 github pages，点击 choose a theme 选择主题。
然后选一款自己喜欢的主题，这个可以随便选，因为后面也用不到。
最后出现以下界面（如果没有出现可忽略这步），拉到最后选择 Commit changes 就行。
这样博客首页就做好了，现在可以在浏览器中输入：用户名.github.io 进行访问。以我的为例输入 Duduanwangu.github.io 显示如下界面。如果出现404，请检查你注册的邮箱有没有验证。
4. 配置 SSH Key
配置这个是因为你用 git 提交代码到 github 需要你的 github 权限，使用 ssh key 可以解决本地和 github 的连接问题，而且也比较安全。当然你也可以不用配置，直接使用用户名和密码提交代码也可以。
接下来在桌面上右键鼠标选择 git bash here 打开 git
打开之后输入
cd ~/.ssh #检查本机已存在的ssh密匙
如果提示以下内容，说明你是第一次使用 git
No such file or directory
此时继续输入
ssh-keygen -t rsa -C "邮件地址" #邮件地址就是你注册账户时用的邮箱
然后连续三次回车，最终会生成一个文件在用户目录下，打开用户目录（一般在C盘），找到 .ssh 文件夹。
进入 .ssh 目录找到 id_rsa.pub 文件，用记事本打开并复制里面的内容。然后打开你的 github 主页，点击你头像下方的 Settings，进入个人设置，接着点击 SSH and GPG keys --> New SSH key(右上角一个绿色的按钮，点他创建新的ssh)。
将刚复制的内容粘贴到 Key 里，Title 随便填，最后点击 Add SSH key 即可。
4.1 测试是否成功
在 git 中输入：
ssh -T git@github.com
如果提示 Are you sure you want to continue connecting (yes/no)? ，输入 yes，会看到：
Hi Duduanwangu! You've successfully authenticated, but GitHub does not provide shell access.
看到这个说明 SSH 配置成功！
4.2 设置 git 的 user name 和 email
因为 git 是分布式版本控制系统，所以，每个机器都必须自报家门：用户名和 email。
在 git 中分别输入命令：
git config --global user.name "Duduanwangu" #你的github用户名，非昵称
git config --global user.email "xxx@qq.com" #填写你的github注册邮箱
注意 git config 命令的参数 --global，用了这个参数，表示这台机器上的所有 git 仓库都会使用这个配置。当然你也可以只对某个仓库使用，去掉 --global 参数即可。
配置好之后可以使用以下命令查看配置信息：
git config -l #查看配置信息
5. 搭建 hexo 环境
5.1 hexo 简介
Hexo是一个简单、快速、强大的基于 Github Pages 的博客发布工具，支持Markdown格式，有众多优秀插件和主题。
官网：http://hexo.io
github：https://github.com/hexojs/hexo
5.2 安装 hexo
首先创建一个存放 hexo 组件的目录，这个目录就是你以后写博客的地方。
在这个目录右键选择 Git Bash Here
然后再命令行输入 npm install hexo -g，开始安装 Hexo
这里 npm 安装会很慢，我的等了半天也没动静，不过我们可以将 npm 的源换为淘宝的镜像源，在命令行中输入以下命令即可。
npm config set registry "https://registry.npm.taobao.org" #改为淘宝镜像源
执行上面命令之后，再输入 npm install hexo -g 会快很多。
安装好之后，输入 hexo -v，检查 hexo 是否安装成功。出现下图内容说明安装成功。
5.3 初始化
命令行输入 hexo init，这里会比较慢，请耐心等待。
完成后显示 INFO Start blogging with Hexo! 这串提示说明初始化成功
接着输入 npm install，安装所需要的组件
然后回到我们刚才创建的目录，发现多了一堆东西
5.4 修改全局配置
接着在目录中打开 _config.yml 配置文件，这里不要用记事本打开，最好用 VS code 或者其它编辑器打开，并且确保编辑器此时的编码为 utf-8，否则会出现中文乱码。
打开之后，翻到文件末尾，添加以下内容。其中 theme 是主题的名字，我们后面在改，主要往 deploy 里添加内容。修改完后保存即可。
注意：repository 这里还有另一种写法：
repository: https://github.com/Duduanwangu/Duduanwangu.github.io.git
这种写法是针对 hexo2.x 的写法，对 hexo3.x 的已经没有用了，因为我的版本是 hexo3.x 的，所以不用这种写法。
5.5 本地预览
使用命令 hexo s 在本地4000端口开启服务进行预览，这个命令很有用，当我们写好博客之后，可以使用这个命令进行本地预览，然后再提交到 github。取消预览：快捷键 Ctrl + C
接着在浏览器中输入 localhost:4000 访问博客主页，也可以输入 127.0.0.1:4000。
出现上图的页面说明我们的环境基本准备的差不多了，接下来就是修改博客的主题了，因为默认的主题不好看。（PS：如果没有出现上图页面，有可能是你的端口被占用了，至于如何解决，我也不懂）
6. 修改博客主题
6.1 选择主题
我们可以在 hexo 官网选择一款我们喜欢的主题：hexo主题官网
选择自己喜欢的主题后点击主题名进入发布人的 github。
我个人比较喜欢的两个主题：hexo-theme-yilia 和 hexo-theme-tomotoes
这里主要以第一个主题 hexo-theme-yilia 为例。对第二个主题感兴趣的同学可以参考这篇文章：https://foxgrin.github.io/posts/29757/
6.2 安装主题
点击第一个主题连接，进入主题的 github ，复制主题连接。
然后回到我们的博客目录，进入 themes 文件夹，右键选择 Git Bash Here，输入 git clone + 复制的连接，开始下载主题。(注意：在 git 中粘贴要用右键，Ctrl + V 没有用)
上图是我忘记进入 themes 文件夹就开始下载了，不过没有影响，下载完后移入 themes 文件夹就行。下载过程可能会比较慢，觉得太慢的同学可以用另一种方法，就是直接在 github 下载主题的压缩包到本地，然后解压到 themes 文件夹即可。
这里可以将下载的主题文件名改为 yilia，这样好记一点。
然后进入主目录下的配置文件 _config.yml
找到末尾刚才说的 theme 配置，将它修改为 yilia，就是主题的文件名。
接着 git 中输入 hexo g 生成 public 文件夹，这个文件夹的内容都会提交到 github 上。
hexo s 开启本地预览服务，预览主题效果：
6.3 修改主题配置
先修改博客根目录下的 _config.yml 文件，在文件开头相应的地方写你的名字，其它先不用管。
然后 git 中输入以下命令，注意是在根目录下执行这条命令：
npm i hexo-generator-json-content --save
在 _config.yml 文件末尾加上以下配置，记得保存。
jsonContent:
meta: false
pages: false
posts:
title: true
date: true
path: true
text: false
raw: false
content: true
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: true
categories: true
tags: true
接着打开主题目录下的配置文件 _config.yml
在文件开头根据自己的情况选择
6.4 头像等其它图片的设定
在 /hexo-blog/source 目录下创建 img 文件夹，以后所有上传到文章的图片都存放在这里面，不同的图片你可以在这个文件夹下再创建不同的文件夹来存放。
然后在主题的配置文件 _config.yml 中找到头像的配置，输入你的图片 url。
配置文件中其它需要图片的地方方法都与上面的一样，至于其它地方的配置，大家可以参考主题的 github。
最后在 git 中分别执行以下两条命令：
hexo g #生成
hexo s #启动预览服务
#两个命令也可以组合使用：
hexo s -g #生成并预览
6.5 创建必要的文件夹
开启标签页，git 中输入命令：
hexo new page tags
执行完后，会发现 /hexo-blog/source 下面多了 tags 文件夹。接着在 tags 文件夹下创建文件夹随笔，在随笔文件夹下创建 index.md 文件（手动创建，不用命令，文件内容可以为空）。
开启分类页：
hexo new page categories #git中输入这条命令
开启关于页：
hexo new page about
7. 上传到 github
git 中输入命令 hexo d 将 public 中的内容提交到 github，如果显示以下内容：
原因是还需要安装一个插件，输入命令：
npm install hexo-deployer-git --save
然后分别输入以下两个命令：
hexo g #生成，相当于更新
hexo d #上传到github
这里补充一条命令 hexo clean，执行这条命令后会清空 public 的内容，如果在执行上两条命令的过程中出现了一些莫名其妙的问题，可以先执行这条命令清理一下 public 的内容，然后再来重新生成和发布。
此时你在浏览器中输入你的用户名.github.io，就能访问你的博客主页了。
注：第一次上传可能需要你的 github 密码。
7.1 上传文章
所有上传的文章都要放在 hexo-blog/source/_posts 目录下，并且文章的格式都必须是md。
放好文章之后执行 hexo d -g (hexo g 和 hexo d 的组合命令) 命令，上传到 github。上传之前你可以先 hexo s 本地预览，看看有没有什么问题。执行命令 hexo g 后，hexo 默认会把md文件都转化为 index.html 文件，一般存放在 public 目录下的以时间命名的文件夹下：
这个文件夹的名称是可以更改的，但 index.html 文件不能删，如果你想在你的 github 上看到md的文件，你可以复制相应的md文件到对应的 index.html 文件下。
7.2 保留 README.md 等文件
README.md 等不是文章的文件可以直接放在 source 文件夹下，他们会生成到 public 目录下。
README.md 文件会默认转换为 html 文件，所以上传到 github 之前，可以手动将 README.md 复制到 public 目录下，并删除 README.html 文件（这个文件不会在博客主页出现，所以可以删除），然后就可以到你的 github 博客仓库查看效果。
不过这个方法很麻烦，因为每次执行 命令 hexo g 后，public 目录下都会生成 README.html 文件，所以我们换另一种方法。首先打开博客根目录下的配置文件 _config.yml，然后找到 skip_render，在后面加上README.md 即可。这样就不用每次都手动删除 README.html 文件了。
8. 写博客
执行命令：
hexo new my_first_blog #生成md文件
hexo 会帮我们在 _posts 下生成相应的 md 文件：
#这里稍微说一下 hexo new xxx 命令和 hexo new page xxx 命令的区别：
hexo new xxx #在_posts目录下生成相应的md文件
hexo new page xxx #在source目录下生成相应的文件夹
我们只需要打开这个文件就可以开始写博客了，默认生成如下内容：
当然你也可以自己新建 md 文件，用这个命令的好处是帮我们自动生成了时间。
写博客文章的一般格式如下：
---
title: xxx #文章标题
date: 2019-08-22 18:44:27 #文章生成时间，可以更改
tags: xxx #文章标签，多标签请用用格式[xxx, xxx, xxx]
categories: xxx #文章分类
description: xxx #文章摘要，相当于对文章的简单描述，不过一般用不到
---
以下是正文
截断文章：也就是不让文章内容全部显示在博客主页上。
方法是在文章合适的位置加上``即可。
效果如下：
8.1 写博客工具
编写md文件的工具用的比较多的是 Typora，可以到 官网下载。
官网下载会很慢，不过我已经将安装包分享到网盘了，我的版本是2019.8月份的。
链接：https://pan.baidu.com/s/1HM_LW2b9ptpGuPx3atEANQ
提取码：zf4f
最后再附上 Typora 的使用参考手册：Typora使用手册
其实编写md文件主要用到的是 markdown 语法，只要掌握了这个语法用什么工具都行，不会的同学可以看这篇文章——markdown语法参考手册
掌握了基本的 markdown 语法后，你可以用像印象笔记、有道云笔记、石墨文档等工具编写md文件，因为它们都支持 markdown 语法，而且用起来也不错，甚至你也可以用 VS code 编辑器来编写。总之，你喜欢用哪个就用哪个。
9. 结束语
第一次写博客，肯定有许多不足之处，大家可以指出来，相互交流。希望本篇文章对大家有用。
最后欢迎大家访问我的 github 博客：https://duduanwangu.github.io/
这篇文章也放到了我的 github 博客上：搭建个人博客
同时也同步到了我的 CSDN 上。
