发表更新软件使用6 分钟读完 (大约945个字)

基于 Hexo 和 GitHub 搭建个人博客

本文首先介绍了 Hexo 的安装， 然后介绍了 GitHub Pages 的设置，最后介绍了一些主题自定义的内容。

Hexo 安装

前置条件

  • 安装 Node.js 并了解 npm 相关基础知识；
  • 安装 git 并了解其基本使用方法。

安装 Hexo

1
2
3
4
5
npm install hexo-cli -g # 安装 Hexo
hexo init blog # blog 为博客项目根目录
cd blog
npm install
hexo server # 启动服务

GitHub Pages 设置

GitHub Pages | Hexo

GitHub SSH 连接

配置好 SSH 连接后，就可以使用 SSH 协议来连接 GitHub。

新建 GitHub Repo

创建仓库新建一个名为 username.github.io 的仓库，最后博客的访问地址就是 http://username.github.io.

修改 config 文件中的 deploy 方式

这里采用 Hexo 说明文档中的 One-command Deployment 方式，即一键部署，需要修改 _config.yml 文件中的 deploy 部分和安装 hexo-deployer-git 插件。

1
2
3
4
deploy:
    type: git
    repository: git@github.com: username/username.github.io.git
    branch: main
1
npm install hexo-deployer-git –save

博客撰写与发布

  1. 新建文章

    1
    2
    hexo new post "about" # 新建关于页面
    hexo new "My New Post" # 新建文章

  2. 生成静态文件

    1
    hexo generate

  3. 发布

    1
    hexo deploy

  • 添加多个标签：

    1
    2
    3
    4
    tags:

    - tag 1
    - tag 2

  • 添加分类：

    1
    2
    3
    4
    categories:

    - category 1
    - category 2

  • 添加目录：

    1
    toc: true # 在文章中添加目录

主题自定义

主页三栏、文章页两栏

新建一个_config.post.yml文件，内容如下：

~\blog_config.post.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
widgets:
  # Archives widget configurations
  - # Where should the widget be placed, left sidebar or right sidebar
    position: right
    type: archives
  # Categories widget configurations
  - # Where should the widget be placed, left sidebar or right sidebar
    position: right
    type: categories
  # Tags widget configurations
  - # Where should the widget be placed, left sidebar or right sidebar
    position: right
    type: tags
    # How to order tags. For example 'name' to order by name in ascending order, and '-length' to order by number of posts in each tags in descending order
    order_by: name
    # Amount of tags to show. Will show all if not set.
    amount:
    # Whether to show tags count, i.e. number of posts in the tag.
    show_count: true
  # Table of contents widget configurations
  - # Where should the widget be placed, left sidebar or right sidebar
    position: right
    type: toc
    # Whether to show the index of each heading
    index: false
    # Whether to collapse sub-headings when they are out-of-view
    collapsed: false
    # Maximum level of headings to show (1-6)
    depth: 4

调整两栏的宽度：

在 layout.jsx 中作如下修改：强制双栏显示的页面宽度为三栏的宽度，即 is-3-column。

~\blog\node_modules\hexo-theme-icarus\layout\layout.jsx
1
2
3
4
             <Head site={site} config={config} helper={helper} page={page} />
-            <body class={`is-${columnCount}-column`}>
+            <body class={`is-3-column`}>
                 <Navbar config={config} helper={helper} page={page} />

然后在 layout.jsx 和 widgets.jsx 中修改 columnCount 的值，需要保证二者之和为 12。

~\blog\node_modules\hexo-theme-icarus\layout\layout.jsx
1
2
3
4
                                 'is-12': columnCount === 1,
-                                'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2,
+                                'is-8-tablet is-8-desktop is-9-widescreen': columnCount === 2,
                                 'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3
~\blog\node_modules\hexo-theme-icarus\layout\common\widgets.jsx
1
2
3
4
5
6
7
8
 function getColumnSizeClass(columnCount) {
     switch (columnCount) {
         case 2:
-            return 'is-4-tablet is-4-desktop is-4-widescreen';
+            return 'is-4-tablet is-4-desktop is-3-widescreen';
         case 3:
             return 'is-4-tablet is-4-desktop is-3-widescreen';
     }

目录粘性定位

在 main.js 中添加如下一行：

~\blog\node_modules\hexo-theme-icarus\source\js\main.js
1
2
3
     if ($toc.length > 0) {
+        $toc.addClass('column-right is-sticky'); # 和自己的 widget 的位置对应
         const $mask = $('<div>');

在 widget.styl 中添加如几行：

~\blog\node_modules\hexo-theme-icarus\include\style\widget.styl
1
2
3
+#toc
+    max-height: calc(100vh - 22px)
+    overflow-y: scroll

所有图片居中显示

在 article.styl 中添加如下四行：

~\blog\node_modules\hexo-theme-icarus\include\style\article.styl
1
2
3
4
5
6
7
                 footer
                     strong + cite
                         margin-left: .5em
+            a
+                img
+                    margin: auto
+                    display: block

新建一个自定义的 style 文件，内容如下：

~\blog\node_modules\hexo-theme-icarus\include\style\custom.styl
1
2
3
.footer
    background-color rgba(255,255,255,0.7)
    padding 1.5rem 1.5rem 1.5rem

在 style.styl 中引入：

~\blog\node_modules\hexo-theme-icarus\source\css\style.styl
1
2
  @import '../../include/style/responsive'
+ @import '../../include/style/ZSY_custom'

基于 Hexo 和 GitHub 搭建个人博客

https://latexalpha.github.io/746af0a517d8/

作者

Shangyu ZHAO

发布于

2020-03-03

更新于

2024-04-19

许可协议

#

喜欢这篇文章？打赏一下作者吧

分类

×