苏某的博客
0%

搭建hexo博客指南

发表于 分类于 Disqus： 本文字数： 1.6k 阅读时长 ≈ 6 分钟

搭建个人博客的初衷，是为了不再受制于博客平台(cs*n)，同时还要能专注于博客的编写而不用费心思去处理编译部署打包。（要抄配置直接拉到文章底部，我把配置文件放那了）

这里使用的是hexo博客框架和next主题，用到的依赖如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"hexo": "^7.3.0",
"hexo-deployer-git": "^4.0.0",
"hexo-generator-archive": "^2.0.0",
"hexo-generator-category": "^2.0.0",
"hexo-generator-index": "^4.0.0",
"hexo-generator-search": "^2.4.3",
"hexo-generator-seo-friendly-sitemap": "^0.2.1",
"hexo-generator-tag": "^2.0.0",
"hexo-reading-time": "^1.0.3",
"hexo-renderer-ejs": "^2.0.0",
"hexo-renderer-marked": "^6.3.0",
"hexo-renderer-stylus": "^3.0.1",
"hexo-server": "^3.0.0",
"hexo-theme-landscape": "^1.0.0",
"hexo-theme-next": "^8.21.0",
"hexo-word-counter": "^0.2.0"

前置准备工作

创建两个仓库，这里创建两个仓库是为了通过GitHub action实现自动化部署到GitHub page，如果没有这个需求的话，只需要创建一个仓库。

  • 一个是GitHub page用来放生成的静态文件，

  • 一个是用来放项目源代码的仓库。

创建这两个仓库之后就可以开始搭建博客了。

hexo生成

  1. npm i hexo-cli -g安装hexo命令行（这里注意啊，你安装的hexo命令行是在这个版本的node，要是nvm切换了版本就没了，需要在当前版本再安装一个或者切回这个安装的版本）
  2. 进入你要放这个项目文件夹的目录hexo init 博客名生成hexo项目文件夹
  3. 打开项目，npm i下载依赖
  4. hexo s跑一下项目，命令行出现如下说明成功，这时候进入对应链接就可以看到博客了

博客配置（_config.yml文件）

1
2
3
4
5
6
7
8
# Site
title: xxx的博客
subtitle: ''
description: ''
keywords:
author: 'xxx'
language: zh-CN
timezone: 'Asia/Shanghai'

主题配置

这里用的是next主题

  1. git clone https://github.com/theme-next/hexo-theme-next themes/next安装next主题
  2. 在项目根目录的_config.yml文件内，设置theme: next
  3. hexo s发现页面如下说明修改完成
  4. next有四种主题方案Muse、Mist、Pisces、Gemini，本站使用的是Gemini主题，可以在项目根目录的_config.next.yml文件（没有就自己创建）内，设置scheme: xxx

hexo使用

  1. 博客的编写在/source/_posts/路径下创建.md文件，hexo会自动编译每一个.md文件生成对应博客
  2. 如果想让文章只显示一部分（出现阅读全文按钮），可以在博客中加入一行<!--more-->，这样就把这行代码后的文字隐藏
  3. 文章的标题和日期等信息，代码如下
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    ---
    title: 文章标题
    date: 日期
    update: 更新时间
    categories:
      - 分类文件夹
    tags:
      - tag1
      - tag2
    ---
  4. 关于第3点里的分类和tags需要在项目根目录的_config.next.yml文件中加入以下代码，并且在/source/路径新增/tags/index.md
    1
    2
    3
    4
    5
    menu:
      home: / || fa fa-home
      about: /about/ || fa fa-user
      tags: /tags/ || fa fa-tags
      archives: /archives/ || fa fa-archive

配置自动化

在/.github路径创建/workflows/deploy.yml，这个文件是写action的。我的action如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
name: Blog Build

on:
  push:
    branches:
      - main
      - dev
  pull_request:
    branches:
      - main
      - dev

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v4

    - name: Use Node.js 18
      uses: actions/setup-node@v4
      with:
        node-version: 18
    
    - name: clone themes
      run: git clone https://github.com/theme-next/hexo-theme-next themes/next

    - name: Build and Deploy
      uses: theme-keep/hexo-deploy-github-pages-action@master
      env:
        PERSONAL_TOKEN: ${{ secrets.SSH_PRIVATE_KEY }} # secret 名
        PUBLISH_REPOSITORY: Su-u-un/Su-u-un.github.io # gtihub page仓库，格式：GitHub 用户名/仓库名
        BRANCH: main # 分支，填部署的分支就行
        PUBLISH_DIR: ./public # 部署 public 目录下的文件

其中有个PERSONAL_TOKEN需要去GitHub设置点此前往

  1. 步骤：点击Github右上角头像，逐步点击Settings-Developer Settings-Personal access tokens-Tokens(classic)，如下图点击
  2. 点击后进入页面，如下图设置。滑动到页面底部点击生成，复制好生成的token
  3. 步骤：进入项目源代码的仓库，逐步点击Settings-Secrets and variables-Actions，如下图所示
  4. 完成第3步后，创建secret，这里的Name是写在action文件用的，Secret是第2步创建的token
  5. 完成以上步骤，当项目源代码仓库发生推送操作，他就会自动更新并且部署到github page的那个仓库

项目源代码

  • action文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    name: Blog Build

    on:
      push:
        branches:
          - main
          - dev
      pull_request:
        branches:
          - main
          - dev

    jobs:
      build-and-deploy:
        runs-on: ubuntu-latest
        steps:
        - name: Checkout
          uses: actions/checkout@v4

        - name: Use Node.js 18
          uses: actions/setup-node@v4
          with:
            node-version: 18
        
        - name: clone themes
          run: git clone https://github.com/theme-next/hexo-theme-next themes/next

        - name: Build and Deploy
          uses: theme-keep/hexo-deploy-github-pages-action@master
          env:
            PERSONAL_TOKEN: ${{ secrets.SSH_PRIVATE_KEY }} # secret 名
            PUBLISH_REPOSITORY: Su-u-un/Su-u-un.github.io # 公共仓库，格式：GitHub 用户名/仓库名
            BRANCH: main # github page分支名
            PUBLISH_DIR: ./public # 部署 public 目录下的文件

  • _config.next.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    #scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    scheme: Gemini

    cache:
      enable: true
    minify: true
    sidebar:
      position: left
      display: always
    favicon:
      small: /images/favicon.png
      medium: /images/favicon.png
    social:
      GitHub: https://github.com/Su-u-un || fab fa-github
      E-Mail: mailto:tl071515@gmail.com || fa fa-envelope
    social_icons:
      icons_only: true
    site_state: true
    language: zh-CN
    symbols_count_time:
      separated_meta: false
      item_text_total: true
      item_text_post: true
    tag_icon: true
    post_navigation: left
    menu:
      home: / || fa fa-home
      about: /about/ || fa fa-user
      tags: /tags/ || fa fa-tags
      archives: /archives/ || fa fa-archive

    index_with_subtitle: true
    exturl: true
    exturl_icon: true

  • _config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    # Hexo Configuration
    ## Docs: https://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/

    # Site
    title: 苏某的博客
    subtitle: ''
    description: '这里是苏某'
    keywords:
    author: Johnny Su
    language: zh-CN
    timezone: 'Asia/Shanghai'

    # URL
    ## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
    url: https://su-u-un-github-io.vercel.app/
    permalink: :year/:month/:day/:title/
    permalink_defaults:
    pretty_urls:
      trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
      trailing_html: true # Set to false to remove trailing '.html' from permalinks

    # Directory
    source_dir: source
    public_dir: public
    tag_dir: tags
    archive_dir: archives
    category_dir: categories
    code_dir: downloads/code
    i18n_dir: :lang
    skip_render:

    # Writing
    new_post_name: :title.md # File name of new posts
    default_layout: post
    titlecase: false # Transform title into titlecase
    external_link:
      enable: true # Open external links in new tab
      field: site # Apply to the whole site
      exclude: ''
    filename_case: 0
    render_drafts: false
    post_asset_folder: true
    relative_link: false
    future: true
    syntax_highlighter: highlight.js
    highlight:
      line_number: true
      auto_detect: false
      tab_replace: ''
      wrap: true
      hljs: false
    prismjs:
      preprocess: true
      line_number: true
      tab_replace: ''

      symbols_count_time:
      symbols: true
      time: true
      total_symbols: true
      total_time: true
      exclude_codeblock: false
      awl: 4
      wpm: 275
      suffix: "mins."

    # Home page setting
    # path: Root path for your blogs index page. (default = '')
    # per_page: Posts displayed per page. (0 = disable pagination)
    # order_by: Posts order. (Order by date descending by default)
    index_generator:
      path: ''
      per_page: 10
      order_by: -date

    # Category & Tag
    default_category: uncategorized
    category_map:
    tag_map:

    # Metadata elements
    ## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
    meta_generator: true

    # Date / Time format
    ## Hexo uses Moment.js to parse and display date
    ## You can customize the date format as defined in
    ## http://momentjs.com/docs/#/displaying/format/
    date_format: YYYY-MM-DD
    time_format: HH:mm:ss
    ## updated_option supports 'mtime', 'date', 'empty'
    updated_option: 'mtime'

    # Pagination
    ## Set per_page to 0 to disable pagination
    per_page: 10
    pagination_dir: page

    # Include / Exclude file(s)
    ## include:/exclude: options only apply to the 'source/' folder
    include:
    exclude:
    ignore:

    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: next

    # Deployment
    ## Docs: https://hexo.io/docs/one-command-deployment
    deploy:
      type: ''