Hexo + GitHub Pages 搭建博客 #11

HEXO 是一个快速、简洁且高效的博客框架，

GitHub Pages 是 GitHub 提供的一个网页寄存服务，可用于存放静态网页，包括博客、项目文档甚至整本书。

前提：

• 注册 GitHub👉 教程
• 本地安装 Git 👉教程
• 本地安装 NodeJs 👉教程

1. 创建 GitHub Pages

Create a new repository：

• Repository name：<username>.github.io
• Public

创建完成，则博客地址为 https://<username>.github.io，如果 GitHub 账户名中有大写字母，地址会变成小写字母

2. 安装 Hexo

为 Hexo 创建文件夹如 Blog，进入 Blog 文件夹，在地址栏输入 cmd，则打开的命令行直接为当前目录。

使用 npm 命令安装 Hexo，依次输入：

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

完成后，打开浏览器输入地址：localhost:4000

不报错的话，可以在浏览器看到你的 Hexo 网站。

2.1 Hexo 常用命令

这里也对上面的几句命令进行解释：

npm install hexo-cli -g  #安装Hexo
hexo init blog #初始化博客，名称为 blog，也可以换成其他名字
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

2.2 Hexo 目录结构

进入刚刚建立的 blog 目录，你会看到以下几个主要文件：

.
├── _config.yml # 网站的配置信息，可以在此配置大部分的参数
├── package.json # 应用程序的信息
├── scaffolds # 模版文件夹, 模板是指在新建的文章文件中默认填充的内容
├── source # 资源文件夹是存放用户资源的地方, Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去
|   ├── _drafts # 会被忽略，所以看不到
|   └── _posts # 你写的 Markdown 文件会放在这里
└── themes # 主题文件夹，Hexo 会根据主题来生成静态页面。

我们最常用的几个文件是：

• _config.yml：为网站配置参数，比如下面的部署就是在这里
• source/_posts：你写的文章都在这里
• themes：为博客设置主题

3. 将网站部署到 GitHub Pages

还是在 blog 目录下，用命令行安装插件：

npm install hexo-deployer-git --save

然后打开 2.2 提到的 _config.yml（我是用 Notepad++ 打开的，你可以选择其他方式），找到 deploy 关键字（一般在最底下），把相关部分改成：

deploy:
  type: git
  repo: https://github.com/<username>/<username>.github.io.git
  branch: master

接着，依次执行下面两个命令：

hexo clean
hexo d

查看 https://<username>.github.io 上的网页是否部署成功。

注意执行 hexo d 时有时会要求你输入 GitHub 账户和密码，按要求输入即可。

4. 更换主题

现在你看到的博客是默认主题 landscape，Hexo 有丰富的 主题，你可以更换自己喜欢的主题。

进入主题所在的 GitHub 项目，项目的 ReadMe 文件有配置主题的步骤，大部分都一样。

以比较出名的 next 主题为例👉GitHUb 地址

在你的 blog 目录右击 Git Bash Here，输入：

git clone https://github.com/next-theme/hexo-theme-next themes/next

然后 themes 目录下就会有 next 文件夹或其他主题名对应的文件夹。

打开 2.2 提到的 _config.yml ，找到关键字 theme （在文件下方），把冒号后面的 landscape（默认主题）改为 next 或你下载的主题名。

theme: next

接着，重新生成部署：

hexo g
hexo d

打开你的博客网址，就能看到新的主题啦~

到这一步，如果不出错，你已经完成了博客的部署，接下来，就可以开始你的写作之旅啦😊

返回目录：GitHub 入门教程◀