Hexo网站搭建教程

发表于 更新于

如果

你也可以像我一样

拥有一篇属于你自己的Hexo框架博客网站

那我觉得

这件事情

泰酷辣！！！！！！！！！

泰裤辣

这是一个手把手教你如何搭建一个属于你自己的Hexo框架博客网站的教程

第一节 Hexo简介

Hexo是一款基于Node.js的静态博客框架，Hexo 使用 Markdown（或其他渲染引擎）解析文章，可以方便地生成静态网页，并托管在GitHub和Gitee上，是搭建博客的首选框架，让你实现在不用购买云服务器的情况下拥有一个属于自己的博客网站的梦想。

第二节 前期准备

在安装Hexo之前，需要安装Node.js

进一步想要将Hexo部署到Github或Gitee上，还必须通过Git

2.1 安装Node.js

  • Windows：

在官网下载LTS版本（下载nodejs自带npm）

image-20231003193554011

官网下载地址：Node.js (nodejs.org)

  • Linux
1
2
sudo apt-get install nodejs
sudo apt-get install npm

安装成功验证：

在命令行中输入

1
2
node -v
npm -v

能够顺利输出node和npm的版本号即可

2.2 安装git

  • Windows

    点击Git官网下载安装包，然后按Wizard安装即可

  • Linux (Ubuntu, Debian)：

    1
    sudo apt-get install git-core

  • Linux (Fedora, Red Hat, CentOS)：

    1
    sudo yum install git-core

git -v查看版本，验证是否安装成功

2.3 安装Hexo

通过npm可以直接安装

1
npm install hexo-cli -g

hexo -v查看版本，验证是否安装成功

第三节 搭建本地静态博客

3.1 初始化Hexo博客框架

1
hexo init <folder>

3.2 进入新建的文件夹，安装一下npm

1
2
cd <folder>
npm install

  • npm install 更新可能会较慢，如果失败，可以尝试配置npm代理

    1
    2
    3
    4
    5
    6
    7
    8
    //  配置nmp代理来提高速度，如设置淘宝镜像
    npm config set registry https://registry.npm.taobao.org 

    // 查看配置是否成功
    npm config get registry 

    // 成功后重新npm install安装
    npm install

进入文件夹后，目录如下：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml

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

package.json

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

scaffolds

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

Hexo 的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改 scaffold/post.md 中的 Front-matter 内容，那么每次新建一篇文章时都会包含这个修改。

source

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

themes

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

3.3 生成静态博客网站

1
hexo generate

3.4 启动服务器

1
hexo server

默认情况下，访问网址为：http://localhost:4000/，访问这个本地网址就可以看到自己生成的博客网站

第四节 将博客部署到Github

生成的博客网站只能在自己电脑本地访问当然没意思，所以接下来看看如何把写好的博客部署到Github Pages上。

GitHub Pages 是什么?

GitHub Pages 是由 GitHub 官方提供的一种免费的静态站点托管服务，让我们可以在 GitHub 仓库里托管和发布自己的静态网站页面。

Hexo + Github Pages 发布博客原理

在本地撰写 Markdown 格式文章后，通过 Hexo 解析文档，渲染生成具有主题样式的 HTML 静态网页，再推送到 GitHub 上完成博文的发布。

下面看看怎么实现

4.1 Github创建个人仓库

点击New repository，开始新建仓库

新仓库的名字有固定格式要求，否组无法建站

格式为：用户名 + .github.oi

1
repository name eg.     yourusername.github.oi

4.2 安装hexo上传插件

1
npm install hexo-deployer-git --save

4.3 修改hexo配置文件指定仓库路径

打开文件夹中的_config.yml文件，在文件最下面的Deployment部分修改配置

  1. type项填入”git”
  2. repo项填入你的仓库的https或者ssh地址（点开仓库主页那个绿色的Code就能看到）
  3. branch项填入你的仓库的分支名
1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
 type: git
 repo: 你的仓库的https或者ssh地址
 branch: <你的仓库的分支名>

4.4 部署博客到Github

部署命令

1
hexo deploy

部署完成后，可以在仓库主页的Deployment

第五节 常用命令

new

新建一个博客。执行以下命令后，会在blog/source/_posts/文件夹中新建一个同名的博客文件（.md格式）。通过设置tags字段还可以给这个文章添加标签。

1
hexo new "博客名称"

clean

清除缓存文件（db.json）和已经生成的静态博客文件（public文件夹下的内容）.

1
hexo clean

generate

生成静态博客

1
2
hexo generate
简写为:hexo g

server

启动本地的博客服务器。默认情况下，访问网址为：http://localhost:4000/。

1
2
hexo server
简写为:hexo s

deploy

在相应的网站服务器（一般是Github或Gitee）中部署博客

1
2
hexo deploy
简写为:hexo d

第六节 访问网站

部署在Github后的默认网站url为

1
https://你的用户名.github.io/

如果能成功访问，那么恭喜！你已经成功部署了一个属于自己的博客网站！