博客建站历程与复现

说明

从输入公网IP,看到第一篇Hello World 到现在,已经有六十余天了

在这六十多天里,我也对博客进行了许多许多的更新

趁现在还记得,我想把我的博客建站历程记录下来,便于以后查看

同时,也希望它可以作为一篇教程。为此,我开了一个临时的阿里云ECS服务器,尝试对整个过程进行复现

准备工作

首先要有一台服务器,也有人选择先在本地写好页面之后托管到一些平台,比如gitee,github

但是这可能受到服务商的限制,还有可能被审查而关停,为什么好好的博客被Gitee服务直接关停了？ - 知乎

由于可能在无意中就出现了什么禁词,导致连怎么修改都不知道,所以建议还是自己搞一台服务器

像是阿里云,腾讯云这些老牌的云服务器提供商会有针对学生和新用户的优惠,至少前几年花不了太多钱的

另外,他们还提供了几个月的试用服务,在这里可以白嫖一个月的阿里云服务器

我下面的操作都是在对一台即将到期的ecs服务器初始化后进行的,可以认为是一个纯净的系统

远程连接ecs并安装必要的工具

购买完ecs服务器后,可以进入控制台,设置密码后进行远程连接,之后会进入如下的界面

image-20220530204725462

这就是一个带有root权限的服务器了,里面还基本上空空如也

PS:如果你还不了解基本的linux命令,推荐阅读Linux常用命令

至少要知道以下几个 

1
2
3
4
5
cd : Change directory 切换文件夹  
ls : List files 展现本目录下的文件和文件夹
cp : copy 复制  
rm : remove 删除  
mv : move 移动

当然,实在记不住也可以理解,不过随着用得越来越多,会变得十分熟练的

接下来我们要安装一系列十分有用的工具,这里要用到yum工具,可以认为它是一个内置软件包,能够帮我们安装软件就行了

在家目录下(也就是root目录或~目录),执行yum install -y git g++ tmux vim nginx rsync nodejs npm

这里一共安装了八个软件即git,g++,tmux,vim,nginx,rsync,nodejs,npm,而-y的意思是自动确认

这里不具体介绍他们的功能了,只说一下我们要他们有什么用

  • git可以帮助我们克隆开源仓库以及上传我们自己的仓库,并进行版本控制
  • g++是c++的编译器,如果你不写c++代码也可以不装
  • tmux在这里的作用是保持程序一直运行不中止
  • vim是一个强大的文本编辑器,可以用它编写代码和修改文件
  • nginx帮助我们托管并分享网站
  • rsync帮我们同步数据,其实在本地倒也可以直接用cp
  • node.js是javascript的一种运行环境，是服务器端的javascript的解释器
  • npm是包含在node.js里面的一个包管理工具，就如同linux中的yum仓库一样,可以用来安装软件

安装并运行hexo

介绍:Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

同样在家目录下,运行npm install hexo-cli -g就可以安装hexo了,然后我们敲击hexo -v,看到如下结果,就说明安装成功了

image-20220530213053289

然后我们mkdir blog创建一个空文件夹blog,cd blog进入blog,执行hexo init在本文件夹里初始化hexo

image-20220530213903946

这样就是成功了

注意,由于一些众所周知的原因,github在国内访问并不稳定,clone时可能出错,只好删除blog文件夹重试一遍

如果总是不行,可以自行在网上查阅如何在阿里云里稳定地git clone,这里不赘述了

我们再执行hexo clean && hexo g && rsync -avph public/ /usr/share/nginx/html/

这个命令可以拆解成三个部分

  • hexo clean清除之前生成的文件
  • hexo g生成文件
  • rsync -avph public/ /usr/share/nginx/html/的意思是将该目录下的public文件夹里的所有文件(也就是生成的网页和依赖项)同步到usr/share/nginx/html/这个文件夹下(这个文件夹就是nginx托管的地方)

image-20220530220520486

image-20220530220551544

这样就算是成功了

然后我们还要回到阿里云的控制台,配置一下安全组规则(在重置密码旁边),使我们能在公网访问到网站

至少要开放80端口,如果你日后要使用https,还要开放443端口,如果要使用code-server,还应开放8080端口,如果嫌麻烦,也可以全都开开

image-20220530221023272

这里就是全开开的样子了

然后,我们找到浏览器,输入公网IP(在左下角或者控制台里找到),就能访问网站了

如图,hexo给我们自动写了hello world

image-20220530221226152

安装code-server

或许你也觉得,阿里云的远程连接界面实在是丑,相比之下,还是vscode的界面更喜人一点,也支持鼠标操作,更友好

(或许我们不是合格的程序员吧😂)

恰好,有code-server这个网页版的vscode供我们使用,下面来讲一讲怎么安装它

本应在github上找到,但是为了提升下载速度,还是选一个合适的镜像站吧,截止文章书写日期(2022/5/30),https://hub.xn—p8jhe.tw/还可以正常访问

在上面搜索code-server,找到最新版本的release,选择linux-amd版本,复制链接,我复制的链接是https://hub.おうか.tw/coder/code-server/releases/download/v4.4.0/code-server-4.4.0-linux-amd64.tar.gz,然后cd ~回到家目录,输入wget 刚刚复制的链接

开始下载,运气好的话,一分钟之内可以下载完(如果直接从github上下载就不好说了🤣)

ls一下,如果有code-server-4.4.0-linux-amd64.tar.gz这样一个文件就是成功了,实际上,这是一个压缩包

然后,我们运行tar -zxvf 你的文件名来解压它,屏幕会跳一大堆文件,然后ls一下,出现code-server-4.4.0-linux-amd64这样一个文件夹就是成功了

然后cd 文件夹,运行export PASSWORD="your password"设置codeserver的密码

接着键入tmux运行tmux,这是为了让code-server一直运行着,以后就不用每次打开阿里云远程连接并打开了

可能还要了解一些tmux的命令,可以看看这篇文章

输入tmux new -s code-server就建立了一个名叫code-server的进程

只要我们不重启服务器或者kill这个进程,它就不会关闭

在这个进程里,进入刚刚安装的那个文件夹,输入./code-server --host 0.0.0.0 --port 8080就运行了code-server

出现如下提示就是成功了(not servering https是说明没有以https协议运行,这是不安全的,怎么做放在后面讲)

image-20220530224053088

然后我们在浏览器里输入IP:8080就能访问code-server界面了,如图

image-20220530224245045

输入密码,就进入了熟悉的vscode界面,经历了阿里云,这个看起来还挺眉清目秀了😂

image-20220530224440630

在这里,我们可以用鼠标操作,打开文件,文件夹,复制,粘贴,删除,等等……还可以像vscode一样切换主题,安装扩展,比如中文包,语法高亮,语法检测等等

image-20220530224759511

还是黑色主题看着舒服啊

书写我的第一篇hexo文章并发布

前期工作准备好了,就可以写文章了,在blog目录下,运行hexo new "文章名"hexo会自动帮你生成一个md文档,在文档里安装md语法书写就好了,如果你还不熟悉markdown语法,可以看看官方文档

我们在这里写一个test,试一下markdown的语法吧

image-20220530230246497

渲染并发布后是这样的

image-20220530230532654

以后再写文章,都可以依照hexo new "文章名",写文章,hexo clean && hexo g && rsync -avph public/ /usr/share/nginx/html发布这三部曲来进行了

博客的美化

应该说,建好博客的时间还是可以计算的,约莫一小时吧,然而,美化它的时间可就不可估量咯,我来写写我自己干了什么吧

第一步,就是为博客挑选一个主题

为博客挑选主题

可以访问Themes | Hexo挑选一个心仪的主题(似乎这个网站在国内的访问速度也堪忧啊)

我个人比较推荐Next和Butterfly,这两款主题用的人都很多,也比较方便找到教程和交流群

我使用的是butterfly主题,这里就以它为例了

在blog目录下,执行git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

(如果clone不下来,请再试几次或者clone上面镜像网站上的文件)

然后找到blog根目录下的_config.yml文件,修改最后的主题配置项为butterfly,如图

image-20220530232348901

接着安装所需的渲染器npm install hexo-renderer-pug hexo-renderer-stylus --save,然后可以更新看看效果了

不过,看上去是一片空白诶,反而比刚才还丑了

image-20220530234604061

这是因为我们还没有配置主题呢

修改配置文件

首先修改blog根目录下的配置文件,主要修改开头部分即可,其余保持默认 

1
2
3
4
5
6
7
8
9
10
11
12
13
# Site
title: HeRen's Blog #网站的名字
subtitle: '' #副标题,可以在主题里设置
description: # 签名
 - 种一棵树<br>最好的时间是十年前<br>其次是现在  
keywords:
author: HeRen #作者名
language: zh-CN #语言,这是简体中文
timezone: '' #时区,不必设置

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://47.113.227.184/ #url,可以先填ip,以后有域名了换成域名

部署后,应该看到右边变成了类似下图的样子,同时网站名也正常显示了

image-20220530235541482

然后我们开始对主题配置文件动刀子

找到/blog/themes/butterfly/_config.yml,这就是主题的配置文件

最要紧的是先把空白填起来,找到和图片有关的配置项,注意,这里填的都是url,也就是可以查看图片的链接,如果想上传本地图片,需要先配置一个图床(或者用网上的图床),我就直接从百度上随便找几张图片了 

1
default_top_img: http://pic1.win4000.com/wallpaper/7/598287f8c23f3.jpg #首页大图

还有文章的封面,可以在写文章时最上面加上cover: url,也可以为没有封面的文章统一配置封面,会从给定的图片随机选取作为封面

以下是我自己的配置(图片都是百度上我觉得比较好看的) 

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
cover:
  # display the cover or not (是否顯示文章封面)
  index_enable: true
  aside_enable: true
  archives_enable: true
  # the position of cover in home page (封面顯示的位置)
  # left/right/both
  position: both
  # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
  default_cover: 
    - https://pic4.zhimg.com/v2-26e3ff8a795bd84ec55c20cfd8de7e7e_r.jpg?source=1940ef5c
    - https://img.zcool.cn/community/0108a15540f2790000017c94049717.jpg@1280w_1l_2o_100sh.jpg
    - https://pic2.zhimg.com/v2-6c341ca76eae290e2cf95d1c0f6b0d0f_r.jpg?source=1940ef5c
    - https://p9.itc.cn/images01/20200725/5260877b658e45d6be6e9d1718f4a672.jpeg
    - https://p3.itc.cn/images01/20200725/e26845ce1a1446ada4ffd66c6114674c.jpeg
    - https://img1.baidu.com/it/u=2359650361,787688273&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800
    - https://img2.baidu.com/it/u=2637679299,810171044&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500
    - https://img1.baidu.com/it/u=236627348,1137762435&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281
    - https://img2.baidu.com/it/u=266094510,2614401115&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800
    - https://img2.baidu.com/it/u=1134928682,1022248814&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281
    - https://img0.baidu.com/it/u=3720365347,4164387461&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=283
    - https://img0.baidu.com/it/u=610923963,468542964&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281
    - https://img2.baidu.com/it/u=1895147941,892370216&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500
    - https://img2.baidu.com/it/u=1010181125,2817450648&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500
    - https://img1.baidu.com/it/u=3503913500,2556490092&fm=253&fmt=auto&app=120&f=PNG?w=658&h=500

重新部署,看看效果,是不是好看多了?

image-20220531001230240

image-20220531001203572

然后是特效这一段,其实就是改几个true/false,贴一下我的配置 

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
# Background effects (背景特效)
# --------------------------------------

# canvas_ribbon (靜止彩帶背景)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

# Fluttering Ribbon (動態彩帶)
canvas_fluttering_ribbon:
  enable: true
  mobile: true

# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: true
  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 99 # the number of lines, default: 99.
  mobile: true

# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: false #  open shake (抖動特效)
  mobile: true

# Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999
  mobile: false

# Mouse click effects: Heart symbol (鼠標點擊效果: 愛心)
click_heart:
  enable: true
  mobile: true

# Mouse click effects: words (鼠標點擊效果: 文字)
ClickShowText:
  enable: false
  text:
    # - I
    # - LOVE
    # - YOU
  fontSize: 15px
  random: false
  mobile: false

image-20220531001914436

还挺好看吧,当然,这一段你想怎么来就怎么来

此外,还有很多小细节,比如侧边栏展示什么,要不要有加载动画,头像设置成什么……这些都是在主题配置文件里改的,而且主题配置文件里也有详细的说明了(还有中文说明呢!),所以阅读一遍,改改true/false,也就基本上都能配置出来了,这里就不赘述了

下面主要讲讲一些比较大的改动

右上角的索引

在主题最开始的地方有如下配置

1
2
3
4
5
6
7
8
9
10
menu:
  Home: / || fas fa-home
  # Archives: /archives/ || fas fa-archive
  Tags: /tags/ || fas fa-tags
  # Categories: /categories/ || fas fa-folder-open
  # List||fas fa-list:
  #   Music: /music/ || fas fa-music
  #   Movie: /movies/ || fas fa-video
  # Link: /link/ || fas fa-link
  # About: /about/ || fas fa-heart

设置的是右上角的导航栏,我在这里仅仅打开了home和tag两个按钮,你可以按需打开

配置项中,前一个指定页面位置,比如home就是根目录/,而其他的界面需要我们自己创建,比如,我们要创建一个tag界面

在blog目录下执行hexo new page "tags",会自动在source文件夹下创建一个tags文件夹,里面包含一个index.md,它就会变成页面

我们需要编辑这个index.md,对于tags页面,我们只要在最上面的配置项里写上type: "tags"就可以让hexo帮我们自动生成tags界面了

社交链接

在头像下面,允许我们放置自己的社交链接,比如QQ,B站,微博,知乎,github等等,只需修改social配置项,按照icon: link || the description书写即可,对于icon,butterfly内置了font awesome图标库,只需搜索到并照着它写就好了

不过fa图标还是太少了,比如bilibili就没有,这里介绍一下阿里的矢量图标库iconfont,这估计是最全的图标库了

我们点进网页,注册账号,然后就可以搜索图标并加入项目了,之后,在项目界面,点击下图链接

image-20220601182302731

复制里面的代码,然后回到code界面,在/root/blog/themes/butterfly/source/css/下创建一个font.css文件,把代码复制进来

然后回到主题配置文件,Ctrl+F找到这部分代码,并添加一行代码来引入css文件

1
2
3
4
5
6
7
8
9
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" href="/css/font.css"> #引入iconfont
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    # - <script src="xxxx"></script>

接着就可以使用添加的图标了,我的配置如下

1
2
3
4
5
6
7
8
9
10
11
# social settings (社交圖標設置)
# formal:
#   icon: link || the description
social:
  iconfont icon-gitee: https://gitee.com/hass2003 || Gitee
  iconfont icon-steam: https://steamcommunity.com/profiles/76561199210890695/ || steam
  iconfont icon-bilibili: https://space.bilibili.com/94513876 || bilibili
  iconfont icon-wangyiyunyinleclick: https://music.163.com/#/user/home?id=1323890704 || cloudmusic
  iconfont icon-leetcode1: https://leetcode.cn/u/heren1229 || leetcode
  # fab fa-github: https://github.com/xxxxx || Github
  # fas fa-envelope: mailto:xxxxxx@gmail.com || Email

渲染发布后样式如下,五个图标都显现出来了

image-20220601183547346

评论系统

很自然地,我们希望有一个评论系统,这个的选择可多了,比较常见的有disqus,Twikoo,valine,waline,livere这几个

其中,我一开始选择了valine,后来转向了waline,这是一款从 Valine 衍生的带后端评论系统。可以将 Waline 等价成 With backend Valine.由于后端的存在,waline管理评论,设置邮件提醒以及安全性等方面较valine有较大提升,由于waline官方文档介绍得很详尽了,推荐直接阅读官方文档,配置好了之后在主题配置文件的评论那里选择waline,然后在waline配置里输入url,我的配置如下

1
2
3
4
5
6
7
# waline - A simple comment system with backend support fork from Valine
# https://waline.js.org/
waline:
  serverURL: ************ #我的自建API # Waline server address url
  bg: https://fastly.jsdelivr.net/gh/drew233/cdn/20200409110727.webp # waline background
  pageview: false
  option:

效果如图

image-20220601185909145

页脚美化

我们可能有向页脚添加文字的需求(比如备案号,广告,说明等等),这里提供两种方法,都需要修改/root/blog/themes/butterfly/layout/includes/footer.pug这个文件

第一种方法

向文件最后追加下面的代码,注意if要与之前的的if对齐,ClassName是可以修改的类名

1
2
3
4
5
6
if theme.ClassName.enable
  .icp
    a(href=theme.ClassName.url)
      if theme.ClassName.icon
        img.icp-icon(src=url_for(theme.ClassName.icon))
      span=theme.ClassName.text

然后在主题配置文件的footer下追加以下代码,注意ClassName顶格

1
2
3
4
5
ClassName:
    enable: true   # 是否启用
    url:   # 点击后的链接地址
    text:  # 显示的文字
    icon:  # 图标

效果如图(以添加公网安备为例)

image-20220601191240756

第二种方法

标签化写法,这种看起来更好看一点

首先在Shields.io上生成你自己的图标,向下滑找到Your Badge,填写label(左侧文字),message(右侧文字),color,生成链接

在之前的那个footer.pug追加如下代码,注意p与上面的if对齐

1
2
3
4
5
p#ghbdages
  if theme.ghbdage.enable
    each item in theme.ghbdage.bdageitem
      a.github-badge(target='_blank' href=url_for(item.link)  style='margin-inline:5px')
        img(src=url_for(item.shields) title=item.massage)

然后在主题配置文件里写一个ghbdage类,我的配置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ghbdage:
  enable: true
  bdageitem:
    - link: https://hexo.io/  # 标签跳转链接
      shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #shields的API链接
      message: 博客框架为Hexo_v5.4.1 #鼠标悬停时显示的信息
    - link: https://butterfly.js.org/
      shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
      message: 主题版本Butterfly_v4.2.2
    - link: https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral
      shields: https://img.shields.io/badge/CDN-%E5%8F%88%E6%8B%8D%E4%BA%91-blue?style=flat
      message: 本网站由又拍云提供CDN加速
    - link: https://waline.js.org/
      shields: https://img.shields.io/badge/%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F-Waline-yellow?style=flat
      message: 评论系统采用Waline
    - link: https://cn.aliyun.com/
      shields: https://img.shields.io/badge/Source-阿里云-orange?style=flat&logo=AlibabaCloud
      message: 本站项目部署在阿里云esc服务器上

效果如图

image-20220601192239720

音乐与视频

音乐

说实话,我当初从melody转到butterfly就是因为butterfly自带吸底音乐播放器😂

所以在butter中添加音乐播放器Aplayer是很方便的,只要修改如下代码,其中,aplayer是音乐播放器,而pjax可以让页面切换时音乐继续播放

1
2
3
4
5
6
7
8
9
10
11
12
13
# Pjax
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax:
  enable: true
  exclude:
    # - xxxx
    # - xxxx

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

此外,还要在blog根目录下的配置文件中追加

1
2
3
aplayer:
  meting: true
  asset_inject: false

对于音乐播放器的具体写法推荐阅读Aplayer官方文档

我的做法是,首先用npm install aplayer --save安装aplayer,然后找到主题配置文件的inject部分,在bottom下追加

- <div class="aplayer no-destroy" data-id="歌单ID" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="false"> </div>,具体怎么写请参照文档

效果如图

image-20220601194303132

如果要在文章内部引入音乐播放器,可以这样写{% meting "音乐ID" "netease" "song" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}

视频

对于视频,我只试过用html引入B站视频外链,配置如下

1
2
3
<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="//player.bilibili.com/player.html?aid=*******&bvid=*********&cid=********&page=1&as_wide=1&high_quality=1&danmaku=0&autoplay=false" frameborder="no" scrolling="no" allowfullscreen="true"></iframe>
</div>

引入你的视频时,只需要在b站网页端分享按钮下找到嵌入链接,复制其中的aid,bvid,cid分别填入上面的代码即可

测试音乐和视频如下

image-20220601200109035

看板娘

看板娘,我是照着这篇文章来的,可以自己去看看

搜索功能

搜索功能是参照这篇文章实现的,可以去看看

碎碎念界面

碎碎念是参照这篇文章实现的

(其实就是懒得写了吧喂￣へ￣)

修改字体

想要修改字体,首先要下载字体的TTF文件,我是从方正字库下载的

然后把文件复制到主题的source文件夹下,在同时source/css下新建一个word.css,输入如下代码

1
2
3
4
5
6
7
8
@font-face{
    font-family: 'font1';
    font-display: swap;
    src: url('/字体1.TTF') format("truetype");
}
body {
    font-family: 'font1',sans-serif;
}

然后和刚刚添加社交图标类似,在inject的head下,引入- <link rel="stylesheet" href="/css/word.css">

接着,找到主题配置文件的font类,使用引入的字体,同时可以设置大小

1
2
3
4
5
6
7
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size: '16px'
  code-font-size: '16px'
  font-family: font1
  code-font-family: font1

效果如下

image-20220601201730348

更换cdn

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。我们使用的主要是cdn上托管的js,css等静态文件

最近(2022.5.16日开始),著名的免费cdn服务商jsdelivr再一次遭遇了DNS污染,导致很多博客都加载缓慢,甚至进不去了,包括一些样式也加载不出来了,不幸的是,butterfly的默认cdn就是jsdelivr

所以,如果你的网站受众在国内,且不会一直挂着梯子,你就需要更换cdn了。一种做法是逐个修改cdn,在主题配置文件的最后,可以逐个修改cdn。国内比较大的cdn供应商有字节跳动静态资源公共库和饿了么cdn。可以在上面找到各个文件然后复制链接并修改。但是有的文件他们还没有收录,而且搜索并修改起来也挺麻烦,所以还可以采取另一种办法

目前被DNS污染的只有cdn.jsdelivr.net这一个域名,但jsdelivr还有其他的域名,比如fastly.jsdelivr.net,所以可以直接修改默认配置

找到/root/blog/themes/butterfly/scripts/events/config.js这个文件,里面是默认的cdn地址,在里面进行查找替换,一键全部替换就可以了。不过,fastly.jsdelivr.net的服务器在日本,访问起来也不是太快,不过至少可以访问了

仓库同步到gitee

修改了这么多配置,如果不保存一下,万一哪天不小心删除了,岂不是追悔莫及,因此,我们可以上传到gitee仓库

如果你还不了解怎么用git进行版本控制以及上传,可以看看这篇文章

如果你已经能熟练地创建仓库和使用git了,只要注意一点,主题文件夹(即我们的butterfly文件夹)是自带git记录的,所以push到远端可能失败,只有一个空文件夹。我的做法是直接进入butterfly文件夹,rm -rf .git把git文件夹删掉即可

博客的美化还在进行中(或许也不会有尽头),以后可能继续写些其他东西

自己搭建图床

我们还没有解决怎么上传图片的问题呢🤣,之前说,可以将图片上传到免费的图床,但是这毕竟受制于人,万一它哪天倒闭了,图片就全部挂了,更好的解决方案是自建一个图床,不仅管理方便,访问起来也更快

提供图床服务的企业也有很多家,比如七牛云,又拍云,阿里云OSS,腾讯云COS等等,我选择的是又拍云(毕竟有免费渠道)

又拍云推出了又拍云联盟活动,只要在页脚为它打广告,就能获得足够使用一年的代金券,还是很划算的

此后,就一步步按照它的文档来操作就可以了

另外,推荐一个工具,PicGo,是一个很方便的图片上传工具,如果再搭配Typora作为markdown编辑器甚至可以让你感觉操作如行云流水

域名,备案与ssl证书

我相信,很少有人会直接通过IP来访问网站,更多情况下,我们都是用域名来访问网站,所以我们应该购买一个域名

我是在阿里的万网上购买的域名,.top域名首年才花了一块钱😁

然后登录阿里云的域名控制台,将域名解析到你的IP地址,就可以访问了。不过一段时间后，就又不能访问了，这是因为域名需要备案。

关于备案的过程可以看我的另一篇文章网站备案记录。

备案结束后，还要申请ssl证书，等等等等

最后再提一下code-server的ssl证书问题，如果要在code-server里预览markdown文档，必须通过https协议连接

可以在部署code-server时加上--cert [你的证书存放路径] --cert-key [你的key路径]来指定证书位置并通过https访问

这样,就可以通过域名:8080来访问code-server并实现预览功能了。