Dolor y gloria

L´Adiccion

0%

Hexo基础建站

发表于 更新于 分类于

之前为了建立一个自己的个人博客，浏览过各种网站搭建方法，最后选择Hexo+Github Pages的方式建站。

时隔半年多NexT主题更新至8.0.0，为了系统地升级blog决定把Hexo和NexT主题重装一次，重新记录全过程作为技术笔记保存，待未来遇到问题时能有据可循地查漏、解决疑难问题。

简介

Hexo

Hexo 是一个由Node.js支持的快速，简单且功能强大的博客框架。

Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

特征

  • 快速生成
  • 支持GitHub Flavored Markdown和大多数Octopress插件
  • 一键部署到GitHub Pages，Heroku等
  • 强大的API可实现无限扩展
  • 数以百计的主题和插件

Github Pages

（待续）


准备工作

安装 Hexo 前要先安装：

  • Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
  • Git

Node.js

可以通过官方的 安装程序进行安装。

其它的安装方法：

  • Windows：通过 nvs（推荐）或者nvm 安装。
  • Mac：使用 Homebrew 或 MacPorts 安装。
  • Linux（DEB/RPM-based）：从 NodeSource 安装。
  • 其它：使用相应的软件包管理器进行安装，可以参考由 Node.js 提供的 指导

当前版本：12.18.4


Git

Git 初始化安装配置详见：GitHub 初始化配置


安装Hexo

快速安装

使用npm安装 Hexo

1
npm install -g hexo-cli

当前版本：v4.2.0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
hexo: 5.2.0
hexo-cli: 4.2.0
os: Windows_NT 10.0.18363 win32 x64
node: 12.18.4
v8: 7.8.279.23-node.39
uv: 1.38.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.16.0
modules: 72
nghttp2: 1.41.0
napi: 6
llhttp: 2.1.2
http_parser: 2.9.3
openssl: 1.1.1g
cldr: 37.0
icu: 67.1
tz: 2019c
unicode: 13.0

Hexo初始化

在想要的路径下新建文件夹，目录下运行cmd

1
hexo init

新建完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
8
9
10
.
├── _config.yml        # 全局配置文件
├── package.json       # 记录hexo需要的包的信息
├── package-lock.json
├── node_modules       # hexo需要的模块
├── scaffolds          # 文章模板
├── source             # 博文.md文件
|   ├── _drafts
|   └── _posts
└── themes             # 主题配置文件

  • _config.yml

    网站的 配置 信息，您可以在此配置大部分的参数。

  • package.json

    应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，可以自由移除。

  • scaffolds

    模版 文件夹，当新建文章时，Hexo 会根据 scaffold 来建立文件。

    Hexo的模板是指在新建的文章文件中默认填充的内容。

  • source

    资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

    • 关于找不到_drafts文件夹，直接新建文件夹后打开_config.yml

      1
      render_drafts: true #显示草稿

  • themes

    主题 文件夹。Hexo 会根据主题来生成静态页面。

  • node_modules

    Nodejs 周边生态安装包存放处。


生成与预览

1
2
hexo g # 生成
hexo s # 启动服务

hexo s 是开启本地预览服务，打开浏览器访问 http://localhost:4000 即可看到内容

执行以上命令之后，hexo 就会在 public 文件夹生成相关 html 文件，这些是博客的静态文件，后续需要把这些提交到 GitHub 上。


安装主题

这里以 hexo-theme-yilia 这个主题为例做一下说明。

首先下载 hexo-theme-yilia 这个主题：

1
2
cd /d/document/GitHub/hexo/
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

下载的主题文件都在 theme 目录下。

然后将 Hexo 根目录下的_config.yml 中的 theme: landscape 改为 theme: yilia，然后重新执行 hexo g 来重新生成。

注意：如果出现一些莫名其妙的问题，可以先执行 hexo clean 来清理一下 public 的内容，然后再重新生成。


部署到Github Pages

配置_config.yml

在配置文件_config.yml中作如下修改：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:lluphok/lluphok.github.io.git
  branch: master

使用hexo deploy部署

1
2
hexo deploy
hexo d

  • 如果出现如下错误：

    1
    2
    3
    $ hexo d
    INFO  Validating config
    ERROR Deployer not found: git

    是由于缺少插件，可以通过npm安装

    1
    npm install hexo-deployer-git --save

  • 如果出现如下错误：

    1
    2
    3
    4
    Permission denied (publickey).
    fatal: Could not read from remote repository.

    Please make sure you have the correct access rightsand the repository exists.

    是因为没有设置好public key所致。在本机生成public key（参考github帮助）：

    1
    ＃ssh-keygen -t rsa -b 4096 -C "xxx@xxx.com"

    在#user_id/.ssh目录下会生成两个文件，id_rsa.pub和id_rsa.然后登陆github，在SSH设置页面添加上刚才的public key文件也就是id_rsa.pub的内容即可。

执行后目录下新生成一个.deploy_git文件夹。


这个时候个人网站就基本搭建完成了。


附：常用Hexo命令

  • 常见命令：
1
2
3
4
5
6
7
hexo new "postName"      # 新建文章
hexo new page "pageName" # 新建页面
hexo generate            # 生成静态页面至public目录
hexo server              # 开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy              # 部署到GitHub
hexo help                # 查看帮助
hexo version             # 查看Hexo的版本
  • 缩写命令：
1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
  • 组合命令：
1
2
hexo s -g   # 生成并本地预览
hexo d -g   # 生成并上传

参考文章