我是如何搭建博客

____DoLo
239 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情

前言

看完本篇，我们将学习到

  1. 使用hexo搭建博客以及写博客的基本知识
  2. 如何部署到Github Page
  3. 如何利用Github Actions进行自动化部署

首先，来聊一下思路。 通过利用hexo框架来生成静态文件， 并在github创建两个仓库， 一个为公开的Github Page仓库用来部署博客站点，这个需要公开，这样别人才能访问得到， 而另一个为私密仓库来存放博客项目， 使用一个私密仓库来存放的原因是，这样可以使我们的草稿博客别人无法查看到。 最后利用Github Actions来实现自动部署。

Hexo

hexo是一个使用markdown来解析文章， 然后根据主题生成对应的静态页面框架。

准备阶段

请确保在安装之前请确保已经安装node和git, 如果还未安装，如果是Mac用户， 可以使用Homebrew来进行安装。 如果是Windows用户， 可以查阅node官网 以及 git官网

安装

在必备的应用程序安装成功后， 即可通过npm来安装hexo

$ npm install -g hexo-cli

可以通过下面命令进行验证， 如果安装成功， 将会输出相关工具的版本信息

$ hexo version
hexo-cli: 4.3.0
...

建站

使用下列命令来创建一个存放博客的文件夹，并生成所需的文件

$ hexo init <folder>
$ cd <folder>
$ npm install

创建成功， 目录结构将是如下

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

_config.yml

网站的全局的配置文件

package.json

npm等工具的配置文件

scaffolds

模版文件夹， hexo会根据相应scaffold来创建对应文件， 可以在该目录下创建各种布局文件

source

用于存放资源的地方， 除了_posts文件夹，其他以_开头的文件夹和文件都会被忽略，文件会解析到public文件夹

themes

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

配置

对于网站的配置，可以简单先了解下面几项并根据自己情况进行修改， 更加详细可以查阅文档

# 网站相关配置
title: '' # 网站标题
subtitle: '' # 网站副标题
description: '' # 网站描述
keywords: # 网站关键词， 支持多个关键词
author: '' # 你的名字
timezone: 'Asia/Shanghai' # 网站时区

# 网址
# 网站的地址，本文会使用github page，所以可以将下面的username改为你的用户名
url: https://username.github.io/

# 主题, 本文选择inside主题，如果也喜欢这款主题可以不做修改
theme: inside

# 部署
deploy:
  type: git
  # 本文使用github page, 可以改成你github page仓库地址
  repo: git@github.com:<你的 Github 用户名>/<你的 Github 用户名>.github.io.git
  branch: main

写作

通过下面命令生成一个新的文章或者页面

$ hexo new [layout] <title>

可以指定布局， 默认是post， 可以在_config.yml文件中的default_layout配置项进行配置， 会根据scaffolds目录下的布局模版进行创建。 使用post布局时， 文章会显示在页面中。使用draft布局不会显示在页面当中， 但是可以通过在执行hexo命令时添加--draft参数， 或者在_config.yml文件中的render_drafts配置项配置成true，并且可以通过下面命令来进行公开发布。

$ hexo publish [layout] <title>

使用主题

你可以到网站 选择自己喜欢的主题， 本文将选择inside 主题来讲解

首先通过下面命令安装

$ npm install hexo-theme-inside

配置_config.yml

theme: inside

在项目目录下创建主题配置文件_config.inside.yml， 可以将下面配置复制过去，该配置的效果情况可以查看我的博客， 如有不喜欢的地方， 可以查阅 这里 根据自己的喜好进行配置。

profile:
  # 可以在source目录新建一个image文件夹， 然后放入自己的头像，按照下面改为自己的路径
  avatar: /image/avatar.gif  

# 字体文件路径
url: //fonts.googleapis.com/css？family=Baloo+Bhaijaan|Inconsolata|Josefin+Sans|Montserrat

# 整个网站的默认字体
base: "'Josefin Sans','PingFang SC','Microsoft YaHei'"
# 侧边栏作者字体
logo: "Lobster,cursive,'Josefin Sans','PingFang SC','Microsoft YaHei'"

# 侧边栏菜单字体
menu: "IM Fell DW Pica SC,'Josefin Sans','PingFang SC','Microsoft YaHei'"

# Font for:
# 用于下列地方的字体
# fab按钮的百分比
# 文章页面的月份
# 文章的计数
# 分页
# TOC索引
# 类别
label: "Sarpanch,'Josefin Sans','PingFang SC','Microsoft YaHei'"

# Headline(h1, h2, h3, h4, h5, h6) font, fallback to `base`
# h1~h6标题字体
heading: "impact,'Josefin Sans','PingFang SC','Microsoft YaHei'"

# 代码和代码块字体
code: "'Fira Code',Consolas,monospace"

# 打印时的字体
print: "'PingFang SC','Microsoft YaHei'"
  
# 黑暗模式颜色配置
darkmode:
  accent_color: '#539bf5'
  foreground_color: '#adbac7'
  border_color: '#373e47'
  background: '#22272e'
  sidebar_background: '#22272e'
  card_background: '#2d333b'
  highlight: [
    '#2d333b', '#444c56', '#3e4451', '#545862',
    '#565c64', '#abb2bf', '#b6bdca', '#c8ccd4',
    '#e06c75', '#d19a66', '#e5c07b', '#98c379',
    '#56b6c2', '#61afef', '#c678dd', '#be5046'
  ]
# 底部设置
footer:
  powered: false
  theme: false

Github Page

到这里， 可以在Github创建两个仓库

  1. 一个公开的用于存放站点的仓库，为了能够通过域名<你的 GitHub 用户名>.github.io 来访问， 这个仓库的名称必须为<你的 GitHub 用户名>.github.io
  2. 一个私密的仓库用于存放项目，名称可以随意，这里我们先用repo来指代, 将下面的.gitignore 加入项目， 可以根据情况添加其他忽略项， 然后将项目推送的repos仓库。

Github Actions Runner

接下来， 我们来聊聊如何利用Github Actions来实现自动生成网站的静态文件并推送至<你的 GitHub 用户名>.github.io 仓库。 只要简单几步就可以达成这些任务。

  1. 需要生成用于执行自动化任务的电脑与Github进行交互时需要的密钥， 执行下列命令， 会在当前目录下生成 github-deploy-key 和 github-deploy-key.pub 两个文件。
$ ssh-keygen -f github-deploy-key

  1. 复制github-deploy-key的内容，到上一节所创建的私密仓库 repos 的 Settings -> Secrets -> Actions -> New repository secret

    1. 在 Name 输入框填写 ACTION_DEPLOY_PRI
    2. 在 Value 输入框填写 github-deploy-key 文件内容

    添加Github-Deploy-Key示范图

  2. 复制 github-deploy-key.pub 文件内容，在 <你的 GitHub 用户名>.github.io 仓库 Settings -> Deploy keys -> Add deploy key 页面上添加。

    1. 在 Title 输入框填写 ACTION_DEPLOY_PUB
    2. 在 Key 输入框填写 github-deploy-key.pub 文件内容
    3. 勾选 Allow write access 选项

    添加Github-Deploy-Key.pub示范图

  3. 编写Github Actions， 在项目目录下创建.github/workflows/deploy.yml， 目录结构如下

blog (repository)
└── .github
    └── workflows
        └── deploy.yml

deploy.yml 内容可以复制下面内容，并修改GIT_USER_NAME和GIT_USER_EMAIL

name: CI

on:
  push:
    branches:
      - main

env:
  # git的用户名
  GIT_USER_NAME: 你的Git用户名
  # git的邮箱
  GIT_USER_EMAIL: 你的Git邮箱

jobs:
  build:
    name: Build on node ${{ matrix.node_version }} and ${{ matrix.os }}
    runs-on: ubuntu-latest
    strategy:
      matrix:
        os: [ubuntu-latest]
        node_version: [16.x]
    steps:
      - name: Check out repository code
        uses: actions/checkout@v2
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          version: ${{ matrix.node_version }}
      - name: Setup Hexo
        run: npm install hexo-cli -g
      - name: Install Dependencies
        run: npm install
      - name: Set Env
        env:
          ACTION_DEPLOY_KEY: ${{ secrets.ACTION_DEPLOY_PRI }}
        run: |
          mkdir -p ~/.ssh/
          echo "$ACTION_DEPLOY_KEY" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          git config --global user.email $GIT_USER_EMAIL
          git config --global user.name $GIT_USER_NAME
      - name: Deploy
        run: |
          hexo clean
          hexo deploy
avatar
文章
阅读
粉丝