前端之路上的个人博客搭建全记录：Hexo+GitHub Pages+GitHub Actions

前端

2023-11-23 02:52:44

前言

作为一名前端开发者，拥有一个自己的博客是十分必要的。博客可以帮助我们记录自己的学习和工作经验，分享自己的技术见解，还可以帮助我们建立自己的品牌和影响力。

然而，对于很多前端开发者来说，搭建一个个人博客并不是一件容易的事情。我们需要选择合适的博客平台，学习如何使用博客平台，还需要对博客进行优化和维护。

本文将详细记录我在搭建个人博客时使用的技术栈和搭建步骤，包括Hexo、GitHub Pages和GitHub Actions。希望对有兴趣搭建个人博客的前端开发者有所帮助。

技术栈选择

在搭建个人博客之前，我们需要先选择合适的技术栈。目前，比较流行的个人博客搭建技术栈主要有以下几种：

WordPress：WordPress是一个功能强大的博客平台，但它需要我们自己购买服务器和域名，而且需要我们自己进行维护。
Blogger：Blogger是一个免费的博客平台，但它对博客的功能和外观有限制。
Jekyll：Jekyll是一个静态博客生成器，它可以帮助我们快速生成静态博客页面，但它需要我们有一定的编程基础。
Hexo：Hexo是一个静态博客生成器，它比Jekyll更简单易用，而且它提供了丰富的主题和插件。

经过对比，我最终选择了Hexo作为我的个人博客搭建技术栈。Hexo是一个非常适合前端开发者的博客搭建工具，它简单易用，而且提供了丰富的主题和插件。

搭建步骤

1. 安装Hexo

首先，我们需要安装Hexo。我们可以通过以下命令安装Hexo：

npm install -g hexo

安装完成后，我们可以通过以下命令创建新的博客项目：

hexo init my-blog

其中，my-blog是博客项目的名称。

2. 选择主题

Hexo提供了丰富的主题，我们可以根据自己的喜好选择合适的主题。我们可以通过以下命令安装主题：

hexo install-theme <theme-name>

其中，<theme-name>是主题的名称。

3. 编写文章

我们可以通过以下命令创建新的文章：

hexo new <post-name>

其中，<post-name>是文章的名称。

文章的默认格式是Markdown，我们可以使用Markdown编辑器来编写文章。

4. 生成静态页面

当我们写完文章后，我们需要生成静态页面。我们可以通过以下命令生成静态页面：

hexo generate

生成静态页面后，我们可以通过以下命令启动本地服务器预览博客：

hexo server

5. 部署到GitHub Pages

GitHub Pages是一个免费的静态网站托管平台，我们可以将我们的博客部署到GitHub Pages上。

首先，我们需要创建一个GitHub仓库，并将博客项目的代码提交到GitHub仓库中。

然后，我们需要在GitHub仓库中创建一个名为CNAME的文件，并在CNAME文件中写入我们的域名。

最后，我们需要在GitHub仓库的Settings页面中将GitHub Pages启用，并选择要部署的分支。

6. 使用GitHub Actions自动部署

GitHub Actions是一个自动化工具，我们可以使用GitHub Actions自动将我们的博客部署到GitHub Pages上。

首先，我们需要创建一个GitHub Actions的工作流文件。工作流文件是一个YAML文件，它定义了工作流的执行步骤。

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '16'
      - run: npm install
      - run: npm run generate
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public