教程：纯小白如何搭建自己的Github博客并写第一篇博文

写在前面：最近完成了我的github博客，搭建的过程很简单，我也是照着网上的教程学习的。但由于之前我没接触过博客搭建，搭建完之后如何写文章并发布花了很长时间才搞定。而网上的教程也几乎停留在搭建博客结束，因此我决定把自己的学习成果记录下来，希望对大家有帮助。

1 搭建Github博客

这一步我不想赘述，请大家移步看 知乎用户@会飞的猪 写的这篇文章（https://zhuanlan.zhihu.com/p/28321740），过程写得非常清晰，我就是按照这篇文章完成了第一步博客的搭建。在此感谢 知乎用户@会飞的猪，大家可以也觉得他这篇文章有帮助，也可以给他点个赞:) 。由于我的最终搭建过程略有出入，大家可以完成到这篇文章中的第2部分-github官网的相关设置，跳回来跟着下面的步骤继续。

这篇文章的第3部分-Github桌面版我也下载了，不过不是必要的，后面我没怎么用，在本文的后半部分我也会教大家如何用简单的命令行进行博客的发布。

此外，博客的主题我用的是hexo的NexT，大家可以跟我一起先用NexT主题熟悉一遍：
（当前假设大家都完成了上述文章中Github官网的设置）

1.1 确认github上创建的repository名称

首先确认github上repo的名称有没有写对，比如我的github昵称为“YUZehuiIC”，repo名称就叫“YUZehuiIC.github.io”，下一步在本地创建的文件夹名称也叫“YUZehuiIC.github.io”。这一步很重要，如果不一致会导致很多奇怪的bug。

1.2 用系统命令行安装hexo并初始化本地博客文件夹

打开电脑命令行，cd到打算保存博客项目的父文件夹，比如我是

然后输入以下命令行，先安装hexo，并创建hexo默认主题。注意这里命令行不要用Windows PowerShell，要用“Windows键+R”调出运行，输入cmd调出系统命令行，否则hexo init会报错。

$ npm install hexo-cli -g	# 如果没有安装npm, 百度一下其他教程，这个不难，在此不赘述
$ hexo init YUZehuiIC.github.io  # 注意这是我的博客名，你要替换成自己的，和github上创建的repo一模一样
$ cd YUZehuiIC.github.io	# 进入本地的博客文件夹（以下统称“本地博客文件夹”）
$ npm install
$ hexo server	# 打开本地服务器预览

完成这一步之后，你可以在浏览器地址栏里输入“http://localhost:4000/”看看有没有新安装的hexo主题博客，如果失败了可以返回去看下上面加粗的几个重要点，或者在评论区留言问我。

1.3 下载并安装hexo NexT主题

（假设当前文件夹就是本地博客文件夹“YUZehuiIC.github.io”）
这里先附上NexT主题的官方Github链接：https://github.com/next-theme/hexo-theme-next，我是根据里面的README.md教程配置的。

$ npm install hexo-theme-next	# 下载并安装NexT主题

安装好后，打开本地博客文件夹下的_config.yml文件，即YUZehuiIC.github.io/_config.yml，找到里面的“theme”，改成next，如下所示：

theme: next

（对了，插一句，我用的代码编辑器是Sublime Text3，如果大家没有找到合适的编辑器可以试试这个，挺好用的）

1.4 更新部署博客页面

$ hexo clean	# 清空一下缓存，有时候博客页面显示不正常也可以试试这个命令行
$ hexo g	# 是hexo generate的简写，把刚刚做的改动生成更新一下
$ hexo server	# 在本地服务器看看博客有没有更新成NexT主题：https://localhost:4000
$ hexo d	# hexo deploy，如果本地服务器看了没问题就可以输入github账号和密码传到网站上啦

打开浏览器，输入网站名（我的是https://YUZehuiIC.github.io，大家改成自己的名字），名字总是这个，所以前面github创建的repo名字还有本地博客文件夹名字一定不能错。

至此，github博客的搭建与hexo NexT主题的配置都搞定啦，开不开心！如果有问题可以在评论区问我。

2 创建并发布自己的第一篇文章

这一部分是我写这篇文章的初衷和意义，因为搭建github博客的教程网上非常多，也写得比我好多了。但是对于像我一样的小白而言，搭建完博客，却不知道怎么写文章，而网上的相关教程又很少，是最令人头大的。下面跟我一起来学习吧！

首先给大家看一下当前的本地博客文件夹结构：

可以看到其中有一个source文件夹，就是用来存放我们的博客文章啦。

2.1 用hexo new命令创建文章脚本

下面再次打开系统命令行，cd到本地博客文件夹，输入如下命令创建第一篇文章。

$ hexo new post "A Quick Start for Blog Writing-Markdown"	# 这里引号里面是你的博客名称，这里我写的就是我第一篇博客的名称

如果你顺利创建的话，就可以看到source文件夹下多了一个文件夹“_posts”，并且有个.md后缀的文件出现在_posts文件夹下，比如我的就是“A-Quick-Start-for-Blog-Writing-Markdown.md”

如果你想先写一篇草稿，再把草稿发布成文章，可以输入如下命令行：

$ hexo new draft "my first draft"

写完后再用hexo publish命令发布，具体的可以看我的github博客中的这篇文章，里面有一些基本的Markdown语法和hexo的命令使用：https://yuzehuiic.github.io/2021/05/29/A-Quick-Start-for-Blog-Writing-Markdown/。之后我会相应地写一篇中文版的发到CSDN上来。

2.2 编辑文章

现在打开刚刚创建好的这个.md文件，可以看到已经有一些简单的内容生成了，如“title”"date"等，后面的内容就是你自己发挥啦，支持Markdown语法，我简单截图给大家看一下我的第一篇博客：

2.3 发布文章/更新博客

完成文章的编辑后，最后一步是把文章发布出去，其实就是更新博客，还是这几个命令行：

$ hexo clean
$ hexo g
$ hexo server	# 先在本地预览一下，这一步也可以跳过，直接到下一步
$ hexo d

在浏览器里更新一下自己的博客，看看第一篇文章有没有出现呢？如果在本地预览是有更新的，但浏览器中显示不正常，可以按F5强制刷新页面试试（不是浏览器的重新加载按钮噢）

希望看到这里的你也完成了自己的Github博客搭建与第一篇文章的发布，后续关于博客的美化我也在摸索当中，今天看到 CSDN博主@nightmare_dimple
有一篇写得很好的文章分享给大家（https://blog.csdn.net/nightmare_dimple/article/details/86661502）。如果搭建博客的过程中遇到了问题也不要气馁，可以在评论区留言问我。

最后附上我的Github链接：https://yuzehuiic.github.io/，有任何改进建议也请评论区留言告诉我噢！