从搭建 Hexo 到部署 GitHub 再到写第一篇网络日志

搭建 Hexo

写在前面

安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：

Node.js Git

此外 macOS && Linux 全过程在终端操作

安装依赖环境

Windows 步骤

安装 Git

下载安装：Git

安装 Node.js

下载安装：Node.js

macOS 步骤

安装 Xcode

$ xcode-select --install

安装 Homebrew

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装 Git

$ brew install git

安装 Node.js

$ brew install node

Linux 步骤

安装 Git

Ubuntu:
    $ sudo apt-get install git

CentOS:
    $ sudo yum install git

安装 Node.js

Ubuntu:
    $ sudo apt-get install node

CentOS:
    $ sudo yum install node

安装 Hexo

Windows 步骤

桌面右击 Git Bash Here

然后键入下面的命令，开始安装

$ npm install -g hexo-cli

这一步可能会卡住，不过耐心等待就可以了

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件

$ cd ~
$ hexo init hexo
$ cd hexo
npm install

macOS && Linux 步骤

$ npm install -g hexo-cli

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件

$ cd ~
$ hexo init hexo
$ cd hexo
$ npm install

启动 Hexo

启动 Hexo 后，浏览器输入 localhost:4000 进行访问，也可以使用它的缩写 hexo s 来启动

$ hexo server

将来启动 Hexo 可以使用结合命令直接终端启动

$ cd hexo && hexo server

Hexo 目录

安装了 Hexo 不知道它目录是没法写文章的，下面请看

Windows

macOS

Linux

主题

NexT 主题

NexT 是一个高质量并且优雅的Hexo 主题

进入到 Hexo 目录，执行下面代码，就会在你的 Hexo 目录的 themes/next 里看到这个主题

$ mkdir themes/next
$ curl -L https://api.github.com/repos/iissnan/hexo-theme-next/tarball/v5.1.2 | tar -zxv -C themes/next --strip-components=1

修改主题

使用 Visual Studio Code 打开主题目录里的 _config.yml 进行修改，不会修改的可以到 Hexo 主题之 NexT 配置对照中文中文注释进行修改

配置

以下是 _config.yml 的中文翻译，不懂的可以对照解释

# ---------------------------------------------------------------
# 本文档由 April 进行翻译
# ---------------------------------------------------------------
# Hexo 配置
## 文挡: https://hexo.io/docs/configuration.html
## 源: https://github.com/hexojs/hexo/

# 网站
title: Hexo
subtitle:
description:
keywords:
author: John Doe
language: # 中文: zh-Hans
timezone:

# 统一资源定位符(URL)
## 如果你的网站放在一个子目录, 设置 url 为 'http://yoursite.com/child' 并且 root 为 '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# 目录
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# 写作
new_post_name: :title.md # 新文章的文件名
default_layout: post
titlecase: false # 把标题转换成 titlecase
external_link: true # 在新的标签打开外部链接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
  
# 主页设置
# path: Root 路径为你的博客的 index 页面. (默认 = '')
# per_page: 文章显示的页面数量. (0 = 禁用页码)
# order_by: 文章排序. (默认由日期递减排序)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
# 分类 & 标签
default_category: uncategorized
category_map:
tag_map:

# 日期 / 时间格式
## Hexo 使用 Moment.js 去解析并显示日期
## 你可以自定义所定义的日期格式作
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-密码-DD
time_format: HH:密码:ss

# 页码
## 设置 per_page 为 0 来禁止页码
per_page: 10
pagination_dir: page

# 扩展
## 插件: https://hexo.io/plugins/
## 主题: https://hexo.io/themes/
theme: landscape

# 部署
## 文档: https://hexo.io/docs/deployment.html
deploy:
  type:

# 站点地图
sitemap:
  path: sitemap.xml
  #template: ./sitemap_template.xml

具体请移步: https://hexo.io/zh-cn/docs/configuration.html

插件

Hexo插件: https://hexo.io/plugins/

部署 Git

$ npm install hexo-deployer-git --save

网站字数统计

$ npm install hexo-wordcount --save

Sitemap (站点地图)

$ npm install hexo-generator-sitemap --save

详情请移步: https://github.com/hexojs/hexo-generator-sitemap

宠物

$ npm install --save hexo-helper-live2d

$ npm install live2d-widget-model-koharu

$ npm install live2d-widget-model-shizuku

$ npm install live2d-widget-model-epsilon2_1

$ npm install --save live2d-widget-model-haru

$ npm install live2d-widget-model-hijiki

指令

Hexo 指令

清除 Hexo 缓存

$ hexo clean

查看 Hexo 版本

$ hexo -v

更多请移步: https://hexo.io/zh-cn/docs/commands.html

拓展

查看 Git 版本

$ git version

查看 Node.js 版本

$ node -v

macOS 拓展

卸载 Homebrew

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"

更多

Hexo主页: https://hexo.io

部署 GitHub

注册 GitHub 账户

已经注册过 GitHub 账户的，请跳过此步

https://github.com/join?source=header-home

创建仓库

仓库名必须按照此格式: 账户名.github.io 进行填写，否则后面会很麻烦，并且需要把 Initialize this repository with a README 勾选上，点击 Create repository 创建仓库

在创建好的仓库右侧有一个 Settings 按钮，点击它，下滑到 GitHub Pages 这，你会看到有个链接，访问它，你会惊奇的发现可以用外网打开

将 GitHub 与 Hexo 对接

设置 Git 的 user.name 和 user.email

输入 cd hexo 进入 hexo 目录，接着

把 April 替换成自己的用户名、邮箱替换成自己的邮箱并执行

$ git config --global user.name "April"

$ git config --global user.email "85865528@qq.com"

生成密钥

邮箱替换成自己的邮箱并执行，连续三个回车，生成密钥

$ ssh-keygen -t rsa -C "85865528@qq.com"

得到两个文件，分别是(私钥 id_rsa) 和(公钥 id_rsa.pub)

$ cd ~/.ssh

$ ls

添加密钥到 ssh-agent

$ eval "$(ssh-agent -s)"

添加生成的 SSH key 到 ssh-agent

$ ssh-add ~/.ssh/id_rsa

配置 GitHub

打开在 GitHub 上建好的仓库，点击右侧的 Settings 下的 Deploy keys

点击 Add depoly key 添加部署密钥，接着将 id_rsa.pub 文件里的内容添加上去，并勾选上 Allow write access 它，然后点击 Add key 确认添加

现在已经完成 GitHub 的部署了，测试一下是否可以能连接上

第一次连接 GitHub 会询问你是否继续连接，输入 yes

当看到 Hi 后面是你的用户名，就说明成功了

$ ssh -T git@github.com

配置 Hexo

打开 hexo 目录，找到 _config.yml 文件并打开，找到 deploy 这项(在末尾)

其中 repositary 值，是你 GitHub 仓库里的 SSH (右上角)

你还需要给 Hexo 安装一个插件它才能上传到 GitHub

$ cd hexo

$ npm install hexo-deployer-git --save

部署 GitHub

$ hexo d -g

到这里，就已经部署完成了

另外，凡是以 hexo 开头的命令都要先进入到 hexo 目录才能用

写第一篇网络日志

这里推荐使用 有道云笔记 写博文，因为 Hexo 使用到是 Markdown 语法，而 有道云笔记 正好具备支持写 Markdown 文章的功能，而且支持云服务，再也不怕写过的文章会丢失了

打开有道云笔记，点击左上角新建，选择 Markdown 即可开始你的博文之旅

写完后，全选复制你写的内容，接着打开终端，输入创建文章命令

例如: hexo new post Hello-World

建好后到文章在 /hexo/source/_post 下

$ heso new post <文章名>

你会看到有以 .md 结尾的文件，打开你想要写的文件，然后在原有的内容下粘贴你的文章内容

写完后不要忘记了部署哦

$ hexo d -g

结语

如果你觉得对你有帮助，赞赏一下作者的辛苦劳动吧