hexo 本地编辑md文件_TechRepo | 用 Hexo 及 GitHub Pages 建立个人博客

TechRepo是由软件学院学生科协推出的技术分享系列推送，每两周会进行一次更新，旨在为同学们提供一个分享技术、学习技术、传承技术的平台。欢迎感兴趣的同学关注我们，也欢迎有意向分享技术的同学联系我们(tech@ssast.org)了解投稿事宜。

引言

平时想记录自己的学习历程，做题思路，便想建一个个人博客；网上已有的 blog 网站显得不够个性化，当然想建立一个个人网站，最好再有个个性域名，但是又没有足够的前后端知识。没关系，Hexo + GitHub Pages，可以零成本建立一个美观的 blog。

目录

一、准备

二、撰写文章

三、创建页面

四、推送网站

五、F.A.Q

1

准备

1、GitHub

2、Git

*3、Node.js

*4、Hexo

    已有 GitHub 账号并已经设置好本机 Git 的可以直接跳到第 3 步，记得新建一个 repository 即可。

1、GitHub&GitHub Pages

GitHub 是以 Git 为唯一版本控制工具的项目托管平台。GitHub Pages 是由 GitHub 提供的免费项目网站服务，也可以用来搭建个人博客。

在https://github.com/注册 GitHub 账户，记下自己注册用的邮箱及用户名。注册好后点击 New Repository 建立一个新仓库，仓库名输入用户名.github.io，方便后续的推送操作。

2、Git

Git 下载地址：https://git-scm.com/

Linux 用户可使用包管理器(apt/yum/...)安装 Git。

Windows 用户安装时可选中 Git from the command line and also from 3rd-party software，这样安装后可在 cmd 中使用 Git 命令。(否则只能在 Git Bash 中使用 Git)

安装后，在终端中输入：git --version 查看安装是否成功(如果显示版本号即为安装成功；若命令行提示 not found 则安装失败。)

安装成功后设置本机 Git 与 GitHub 账户，在终端依次输入：

git config --global user.name "你的 GitHub 用户名"

git config --global user.email "你的 GitHub 注册邮箱"

ssh-keygen -t rsa -C "你的 GitHub 注册邮箱"

然后连续三次回车，找到生成的 .ssh 文件夹中的 id_rsa.pub文件，将其内容全部复制，进入 https://github.com/settings/keys，点击New SSH key，粘贴，Add。随后在终端输入

ssh git@github.com

检查是否成功绑定。

3、Node.js

下载 Node.js (https://nodejs.org/)或使用包管理器安装。

安装结束后在终端输入

node -v

npm -v

检查是否安装成功。

4、Hexo

在本机建一个文件夹，用于存放网站相关文件，命名任意，在终端里 cd 进入该文件夹，输入npm install -g hexo-cli 安装 Hexo。

安装成功后输入：hexo init 初始化博客。这一步完成后当前文件夹中会产生 Hexo 所需的基本文件结构。接下来输入：

hexo g

hexo s

hexo g 表示生成博客的全部站点文件，结束后会在博客的 public 目录中看到博客网站的完整文件结构；

hexo s 表示在本地启动预览服务器。用浏览器访问 localhost:4000，应该能看到 Hexo 安装完毕产生的默认站点，包括一篇文章和一个页面。预览结束后按 Ctrl+C (Control+C) 停止本地服务器。

2

撰写文章

 在终端中输入：

    hexo new test

可以创建一篇名为 test(建议不要包含中文、空格及特殊符号)的文章。在 source/_posts 目录下会看到多了一个名为 test.md 的文件。接下来就可以用任意一种 Markdown 编辑器编辑这篇文章。(附：Markdown 语法(中文)；GitHub Flavored Markdown)

文章的 Markdown 文件顶部有若干文档信息，如下：

title: 文章的标题，可以使用中文、空格或特殊符号等

date: 文章发表的时间

tags: 文章标签

category: 文章分类

若要删除一篇文章，删除对应的 Markdown 文件即可。

3

创建页面

	页面一般用来放一些不适合写在文章中的内容，如个人介绍、友情链接等。在终端中输入： hexo new page test 可以创建一个名称为 test(建议不要包含中文、空格及特殊符号)的页面。页面文件被单独放在 source/test 文件夹中，其中 index.md 文件是页面的内容。编辑方法与文章一样。

4

推送网站

为了使博客能被其他人访问，我们需要通过 GitHub 推送。

打开博客根目录下 _config.yml 配置文件，翻到底部修改为:

    deploy:

    type: git

    repo: 这里填入你之前在 GitHub 上创建仓库的完整路径(在 GitHub 上打开你的仓库，找到 Clone or download 按钮，复制其中的链接粘贴于此)

    branch: master

此处需要注意格式(使用 2 空格缩进、冒号后面一个空格)，保存。这个步骤告诉 Hexo 应当把网站推送到哪里。随后在终端输入：

npm install hexo-deployer-git --save

安装部署到 Git 的 Hexo 插件。再在终端依次输入：

hexo g

hexo d

其中 hexo d 为部署本地的网站到仓库，此时打开浏览器输入仓库的名称(xxxx.github.io)，就能访问我们的网站了。

至此，搭建博客的基本工作就已经完成了。

5

F.A.Q

	1、我想换掉默认网址 xxxx.github.io 首先需要注册一个域名，然后将域名绑定 CNAME 记录解析到 xxxx.github.io。接着在 GitHub 上进入你的仓库，在 Settings 中找到 GitHub Pages 板块. 在 Custom domain 中输入你的域名，点击 Save 完成设置。选中 Enforce HTTPS 会强制启用 HTTPS 安全连接(可选)。 接下来，打开博客根目录的 _config.yml 配置文件，找到 url: 这一行，改成 url: 你的域名(视情况加上 http:// 或 https://)，然后重新生成站点即可。
	2、感觉默认主题不太好看 Hexo 网站(https://hexo.io/themes/)上有许多主题可供选择。点击其中的图片，可打开使用该主题的网站以预览效果。文字链接会跳转到主题的 GitHub 仓库地址。假设主题名称是 test，那么下载主题后，把主题文件解压到 themes/test 目录下；之后打开博客根目录的 _config.yml 文件，找到其中 themes: landscape 这一行，改为 themes: test，即可切换到 test 主题。之后需要重新生成站点。
	3、生成的站点跟上次一样/文件没有更新 需要清除缓存，在终端中输入: hexo clean 然后再试一次。
	4、不想直接发表草稿 把相应文章的 Markdown 文件移到 source/_drafts 目录(如果没有就创建一个)下，生成时就会自动忽略。
	5、重新部署网站后自定义域名挂了 在 source 文件夹下创建一个名为 CNAME(无后缀名)的文本文件，在其中输入你的域名并保存。回到 GitHub 重新设置域名、生成并部署站点即可。 6、我还有其他问题 请参考 Hexo 文档(https://hexo.io/docs/)。

文案：技术部

排版：蔡韫睿

审核：骆炳君