Hexo+GitHubPages搭建个人博客网站

最新推荐文章于 2024-04-30 14:23:28 发布

阅读量725

点赞数 1

分类专栏：其他文章标签： Hexo GitHubPages 前端

本文链接：https://blog.csdn.net/weixin_45730091/article/details/103967869

版权

其他专栏收录该内容

9 篇文章 1 订阅

订阅专栏

Hexo 是一个静态网站生成器，GitHub Pages 可以免费帮我们托管静态网站，本文主要介绍如何结合两者搭建一个博客网站。
官网：https://hexo.io/zh-cn/

Hexo 介绍

Hexo 是一个基于 Node.js 开发的静态网页生成器，官网的说明是博客框架，但是我认为它不仅仅可以用于博客，还可以用于企业宣传站、产品展示、文本文档等以信息展示为主的网站。

特点

超快速度
Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。
支持Markdown
Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。
一键部署
只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。
丰富的主题
在众多美观、强大、可定制的主题中选择；使用任何兼容的模板引擎创建自己的主题。
丰富的插件支持
强大的 API 带来无限的可能，与数种模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）轻易集成。

安装 Hexo

Hexo 依赖了 Node.js 和 Git，所以在安装 Hexo 之前必须确保安装了这两个工具。

在命令中执行下面的安装命令

npm install -g hexo-cli

确认是否安装成功

hexo --version

如何能看到类似于下面的输出则证明安装成功。
在这里插入图片描述

使用 Hexo 生成本地网站

在命令行中执行下面的命令用来创建本地网站。

hexo init 网站目录名称
# 例如
hexo init myBlog

创建成功的话会生成一个具有下面目录结构的网站项目。

.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

预览本地网站

在你的网站根目录下执行 npm run server ，它会启动一个 http 服务，用于本地预览。
在这里插入图片描述
访问控制台中提示的地址，如果能看到下面的网页则证明服务启动成功了。
访问：http://localhost:4000/

目录结构

.
├── _config.yml 网站配置文件
├── package.json 包说明文件
├── scaffolds 文章模板目录
├── source 源码目录
| ├── _drafts 草稿文章目录
| └── _posts 发布文章目录
└── themes 主题目录

写文章

创建文章

hexo new 文章文件名称
# 例如
hexo new hello

在这里插入图片描述

写文章

文章配置

语法：YAML
可配置项：https://hexo.io/docs/front-matter
下面是一个示例

---
title: Sublime Text 打开方式
categories:
 - 开发笔记
tags:
 - Sublime Text
date: 2020-01-14 00:00:00
---

文章正文

语法：Markdown
编辑工具：推荐 Typora
下面是一个示例

将本地网站 `自动` 部署到 GitHub Pages

Github Pages 是 Github 提供的一个免费的静态网页托管服务，可以用来托管博客、项目官网、文本文档等静态网页。

常规的方式：

编译构建
将构建结果推送 GitHub 仓库
开启 GitHub Pages

每次更新都需要重复上面的流程，太过繁琐，不推荐。

GitHub：生成 GitHub 访问 token

点击右上角用户头像，选择 Settings 设置
在这里插入图片描述
选择 Developer settings

在 Personal access tokens 中点击 Generate new token

Note：一个名字，英文即可，例如我这里是 myBlog
勾选 repo 选项

点击 Generate token 生成 token

绿色背景中的就是生成的 token，复制保存起来后面需要使用（之后不能查看）。
如果忘记了，就按照上面的方式重新生成。
在这里插入图片描述

GitHub：将 token 配置到项目的 secrets 中

Create a new repository
在这里插入图片描述
在项目中仓库中找到并依次进入：Settings -> Secrets

Name：起一个名字，例如我这里是 myBlog，如果你使用了别的名字，后面的脚本中也要对应修改
Value：就是你上面得到的那个 token

确认你 Add secret 之后能看到添加的这个。
在这里插入图片描述

本地：配置网站根目录

如果你部署的域名是根路径就不需要做任何修改
如果你部署的域名是子目录，就把 root 修改为那个子目录名称

本地：配置 GitHub Actions

在项目中创建 .github/workflows/main.yml 并写入下面的配置内容。

name: build and deploy

# 当 master 分支 push 代码的时候触发 workflow
on:
  push:
    branches:
    - master

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:
    # 下载仓库代码
    - uses: actions/checkout@v2
    
    # 缓存依赖
    - name: Cache dependencies
      uses: actions/cache@v1
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-
    
    # 安装依赖
    - run: npm ci
    
    # 打包构建
    - run: npm run build
    
    # 发布到 GitHub Pages
    - name: Deploy
      uses: peaceiris/actions-gh-pages@v2
      env:
        PERSONAL_TOKEN: ${{ secrets.myBlog }}
        PUBLISH_BRANCH: gh-pages
        PUBLISH_DIR: ./public