正在加载今日诗词....
发表更新linux13 分钟读完 (大约1933个字)0次访问

github pages部署hexo 折腾小结

首次更发布于：2024-02-17，陆续更新中

last update: 2024-02-28

一、域名

1.1

cloudflare控制面板中在dns中创建cname记录，把bg4vrg.git.io的二级域名指向bg4vrg.com
img

1.2

在github pages设置里绑定bg4vrg.com，注意这里修改后无法强制启用https，需要第三步

1.3

在cloudflare 规则页面创建一条页面规则，用于将http://bg4vrg.com/* 的网址启用https规则
img

二、本地git环境

2.1

icarus下载主题，第一条命令网络不通使用npm安装

git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus

1
2
npm install hexo-theme-icarus
hexo config theme icarus

2.2

安装发布部署组件

1
npm install hexo-deployer-git --save

2.3 初始化git环境

1
git init

2.4 测试通讯

测试本地推送到github是否正常，注意要提前在本地生成密钥并部署到github上，因为用户名密码模式已不支持

1
git pull [email protected]:bg4vrg/bg4vrg.github.io.git master

2.5 安装hexo

1
npm install -g hexo-cli

2.6 设置本地部署的博客目录

1
hexo init /blog/

2.7 发布文章

1
hexo new "我的第一篇博客文章"

2.8 卸载hexo

1
npm uninstall hexo-cli -g

2.9 git回滚

第二条命令后面的数字为上一条命令结果中显示的某一个节点数值

1
2
git log --oneline
git reset 9ef9173

三、发布

以下三条为常用命令，g为本地生成静态网站页面，s为开启本地服务方便测试（http://localhost:4000）,d为发布

1
2
3
hexo g
hexo s 
hexo d

四、设置

4.1永久链接

此处参考原文：https://www.duheweb.com/post/20210417143744.html

永久链接（Permalinks）即文章的URL地址

在站点配置文件_config.yml中，找到permalink，进行如下设置

1
2
3
4
5
permalink: :layout/:year:month:day:hour:minute:second.html
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

4.2百度sitemap安装报错

在后面加上no-fund no-audit参数

npm install hexo-generator-baidu-sitemap --save-dev --no-fund --no-audit

4.3为网站所有外链增加nofollow

Add nofollow attribute to all external links automatically.

hexo-filter-nofollow add rel=”noopener external nofollow noreferrer” to all external links for security, privacy and SEO.

Installations

1
$ npm i hexo-filter-nofollow --save

Options

1
2
3
4
5
6
nofollow:
  enable: true
  field: site
  exclude:
    - 'exclude1.com'
    - 'exclude2.com'

enable - Enable the plugin. Default value is true.
field - The scope you want the plugin to proceed, can be ‘site’ or ‘post’. Default value is site.
‘post’ - Only add nofollow attribute to external links in your post content
‘site’ - Add nofollow attribute to external links of whole sites
exclude - Exclude hostname. Specify subdomain when applicable, including www.
‘exclude1.com’ does not apply to www.exclude1.com nor en.exclude1.com.

4.4添加文章分类别名

如果博客分类使用了中文名分类，最好配置对应的英文名，否则在对应的分类url链接中就会出现 URL 编码的中文，比如这样

https://bg4vrg.com/categories/%E4%B8%9A%E4%BD%99%E6%97%A0%E7%BA%BF%E7%94%B5/
参数 描述 默认值
default_category 默认分类 uncategorized
category_map 分类别名
tag_map 标签别名

在_config.yml中做如下修改，前面是博客页面显示的中文字符，冒号后面是中文名分类对应的url名称

需要注意，每行别名前不要用tab键补全，要用空格，否则报错

1
2
3
4
category_map: 
  业余无线电: AmateurRadio
  网络: network
  记录: note

_config.icarus.yml中设置如下：

1
2
3
4
5
6
7
8
9
10
11
navbar:
    # Navigation menu items
    menu:
        首页: /
        归档: /archives
        分类: /categories
        标签: /tags
        关于: /about
        业余无线电: /categories/AmateurRadio
        网络: /categories/network
        Linux: /categories/linux

修改后，上面乱码的url就会变成

https://bg4vrg.com/categories/AmateurRadio

4.5 怎么在页面中将/categories/AmateurRadio变成/AmateurRadio

还没研究好，网上查了资料应该是把_config.yml中的category_dir值修改，但是我没找到具体办法

4.6 将文章、页面从三栏变成两栏

在博客根目录，添加以下2个文件

_config.page.yml

_config.post.yml

分别添加以下内容即可

1
2
3
4
5
6
7
8
9
10
widgets:
    -
        type: recent_posts
        position: left
    -
        type: categories
        position: left
    -
        type: tags
        position: left

4.7 优化移动端显示

在移动端，隐藏 archive 和 tags。

我的主题是npn安装的所以配置文件在node_modules\hexo-theme-icarus

注意前面为+的行为添加代码，为-的是删除代码，+和-不需要写在代码里

diff:blog\node_modules\hexo-theme-icarus\source\js\main.js

1
2
3
4
5
     }
+
+    $('div.container div.card[data-type=tags]').addClass('is-hidden-mobile');
+    $('div.container div.card[data-type=archives]').addClass('is-hidden-mobile');
 }(jQuery, window.moment, window.ClipboardJS, window.IcarusThemeSettings));

4.8 目录粘性定位

原来只支持侧边栏整体粘性定位，为了阅读体验，只针对目录开启粘性定位，增加 column-left is-sticky 类，并调整样式。

diff:blog\node_modules\hexo-theme-icarus\source\js\main.js

1
2
3
     if ($toc.length > 0) {
+        $toc.addClass('column-left is-sticky');
         const $mask = $('<div>');

diff:blog\node_modules\hexo-theme-icarus\include/style/widget.styl

1
2
3
4
+#toc

+    max-height: calc(100vh - 22px)
+    overflow-y: scroll

4.9 文章页面两栏布局

主题默认是三栏布局，在阅读文章时显得有些拥挤。可以通过配置的方式把所有文章变为两栏布局，在_config.post.yml把需要的widget显示在一边即可，可以参考官方文档。

但两栏整体宽度跟三栏不同，因此强制指定为三栏布局，并且修改相应的宽度，这样所有的页面侧边栏宽度保持一致。

注意以下修改的文件同上，都在主题文件夹内

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
diff:layout/layout.jsx

             <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} />
diff:layout/layout.jsx

                                 '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
diff:layout/common/widgets.jsx

 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';
     }

4.10 优化在不同屏幕小大下的宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
diff:include/style/responsive.styl

 +widescreen()
+    .is-3-column .container
+        max-width: $widescreen - $gap
+        width: $widescreen - $gap
+
     .is-1-column .container, .is-2-column .container
         max-width: $desktop - 2 * $gap
         width: $desktop - 2 * $gap

 +fullhd()
+    .is-3-column .container
+        max-width: $fullhd - 2 * $gap
+        width: $fullhd - 2 * $gap
+
     .is-2-column .container
         max-width: $widescreen - 2 * $gap
         width: $widescreen - 2 * $gap

4.7-4.10优化内容转摘自alphalxy的博客，icarus5.0下测试正常，感谢。

4.11 首页添加今日诗词

编辑node_modules\hexo-theme-icarus\layout\layout.jsx

在 <Navbar config={config} helper={helper} page={page} />这行代码下面添加以下代码。后续考虑增加诗词作者。

1
2
3
4
5
6
<br/>
<center>
	<span id="jinrishici-sentence" style="font-size:17px">正在加载今日诗词....</span>
	<span class="mtip" style="font-size:14px"></span>
</center>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

4.12 文章插入bibili视频

其实b站提供了嵌入用的iframe代码，但是插入后只显示很小一块而且无法显示控制按钮。网上搜了一下找到了答案：除了套一层div代码外关键是要插入raw标签。

4.12.1 b站提供代码如下：

1
2
<iframe src="//player.bilibili.com/player.html?aid=466859699&bvid=BV1BL411T7F1&cid=515638529&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> 
</iframe>

4.12.2 插入div标签

按照网上教程操作插入div标签

1
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">

4.12.3 同时在iframe代码后半段还要添加代码

好多网站教程上虽然代码这样写了，但是没有明确说出来，一不小心就漏了

1
style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"

目前得到的代码如下所示

1
2
3
4
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
<iframe src="//player.bilibili.com/player.html?aid=466859699&bvid=BV1BL411T7F1&cid=515638529&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>
</div>

但是hexo g后在网页上的视频还是很小一块，没有变化。实际上是因为没有添加raw标签导致的，我们加上就行了。

1
2
3
{% raw %}

{% endraw %}

完整代码如下，实际效果请看这里。

1
2
3
4
5
6
{% raw %}
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
<iframe src="//player.bilibili.com/player.html?aid=466859699&bvid=BV1BL411T7F1&cid=515638529&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;">
</iframe>
</div>
{% endraw %}

4.13文字和背景彩色设置                                     

因为markdown支持html，所以可以用html语法，具体看这里

代码如下，使用白色文字和黄色背景，字体大小24

1
# <span style='color:white;background:orange;font-size:24px;'>文字和背景彩色设置</span>

github pages部署hexo 折腾小结

https://bg4vrg.com/post/20240217162201.html

作者

fei

发布于

2024-02-17

更新于

2024-03-13

许可协议

#

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

评论

最新文章

分类

广告


×