博客建站历程与复现
博客建站历程与复现
说明
从输入公网IP,看到第一篇Hello World 到现在,已经有六十余天了
在这六十多天里,我也对博客进行了许多许多的更新
趁现在还记得,我想把我的博客建站历程记录下来,便于以后查看
同时,也希望它可以作为一篇教程。为此,我开了一个临时的阿里云ECS服务器,尝试对整个过程进行复现
准备工作
首先要有一台服务器,也有人选择先在本地写好页面之后托管到一些平台,比如gitee,github
但是这可能受到服务商的限制,还有可能被审查而关停,为什么好好的博客被Gitee服务直接关停了? - 知乎
由于可能在无意中就出现了什么禁词,导致连怎么修改都不知道,所以建议还是自己搞一台服务器
像是阿里云,腾讯云这些老牌的云服务器提供商会有针对学生和新用户的优惠,至少前几年花不了太多钱的
另外,他们还提供了几个月的试用服务,在这里可以白嫖一个月的阿里云服务器
我下面的操作都是在对一台即将到期的ecs服务器初始化后进行的,可以认为是一个纯净的系统
远程连接ecs并安装必要的工具
购买完ecs服务器后,可以进入控制台,设置密码后进行远程连接,之后会进入如下的界面
这就是一个带有root权限的服务器了,里面还基本上空空如也
PS:如果你还不了解基本的linux命令,推荐阅读Linux常用命令
至少要知道以下几个
1 | cd : Change directory 切换文件夹 |
当然,实在记不住也可以理解,不过随着用得越来越多,会变得十分熟练的
接下来我们要安装一系列十分有用的工具,这里要用到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
,看到如下结果,就说明安装成功了
然后我们mkdir blog
创建一个空文件夹blog,cd blog
进入blog,执行hexo init
在本文件夹里初始化hexo
这样就是成功了
注意,由于一些众所周知的原因,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托管的地方)
这样就算是成功了
然后我们还要回到阿里云的控制台,配置一下安全组规则(在重置密码旁边),使我们能在公网访问到网站
至少要开放80端口,如果你日后要使用https,还要开放443端口,如果要使用code-server,还应开放8080端口,如果嫌麻烦,也可以全都开开
这里就是全开开的样子了
然后,我们找到浏览器,输入公网IP(在左下角或者控制台里找到),就能访问网站了
如图,hexo给我们自动写了hello world
安装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协议运行,这是不安全的,怎么做放在后面讲)
然后我们在浏览器里输入IP:8080就能访问code-server界面了,如图
输入密码,就进入了熟悉的vscode界面,经历了阿里云,这个看起来还挺眉清目秀了😂
在这里,我们可以用鼠标操作,打开文件,文件夹,复制,粘贴,删除,等等……还可以像vscode一样切换主题,安装扩展,比如中文包,语法高亮,语法检测等等
还是黑色主题看着舒服啊
书写我的第一篇hexo文章并发布
前期工作准备好了,就可以写文章了,在blog目录下,运行hexo new "文章名"
hexo会自动帮你生成一个md文档,在文档里安装md语法书写就好了,如果你还不熟悉markdown语法,可以看看官方文档
我们在这里写一个test,试一下markdown的语法吧
渲染并发布后是这样的
以后再写文章,都可以依照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,如图
接着安装所需的渲染器npm install hexo-renderer-pug hexo-renderer-stylus --save
,然后可以更新看看效果了
不过,看上去是一片空白诶,反而比刚才还丑了
这是因为我们还没有配置主题呢
修改配置文件
首先修改blog根目录下的配置文件,主要修改开头部分即可,其余保持默认
1 | # Site |
部署后,应该看到右边变成了类似下图的样子,同时网站名也正常显示了
然后我们开始对主题配置文件动刀子
找到/blog/themes/butterfly/_config.yml
,这就是主题的配置文件
最要紧的是先把空白填起来,找到和图片有关的配置项,注意,这里填的都是url,也就是可以查看图片的链接,如果想上传本地图片,需要先配置一个图床(或者用网上的图床),我就直接从百度上随便找几张图片了
1 | default_top_img: http://pic1.win4000.com/wallpaper/7/598287f8c23f3.jpg #首页大图 |
还有文章的封面,可以在写文章时最上面加上cover: url
,也可以为没有封面的文章统一配置封面,会从给定的图片随机选取作为封面
以下是我自己的配置(图片都是百度上我觉得比较好看的)
1 | cover: |
重新部署,看看效果,是不是好看多了?
然后是特效这一段,其实就是改几个true/false,贴一下我的配置
1 | # Background effects (背景特效) |
还挺好看吧,当然,这一段你想怎么来就怎么来
此外,还有很多小细节,比如侧边栏展示什么,要不要有加载动画,头像设置成什么……这些都是在主题配置文件里改的,而且主题配置文件里也有详细的说明了(还有中文说明呢!),所以阅读一遍,改改true/false,也就基本上都能配置出来了,这里就不赘述了
下面主要讲讲一些比较大的改动
右上角的索引
在主题最开始的地方有如下配置
1 | menu: |
设置的是右上角的导航栏,我在这里仅仅打开了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,这估计是最全的图标库了
我们点进网页,注册账号,然后就可以搜索图标并加入项目了,之后,在项目界面,点击下图链接
复制里面的代码,然后回到code界面,在/root/blog/themes/butterfly/source/css/
下创建一个font.css文件,把代码复制进来
然后回到主题配置文件,Ctrl+F找到这部分代码,并添加一行代码来引入css文件
1 | # Inject |
接着就可以使用添加的图标了,我的配置如下
1 | # social settings (社交圖標設置) |
渲染发布后样式如下,五个图标都显现出来了
评论系统
很自然地,我们希望有一个评论系统,这个的选择可多了,比较常见的有disqus,Twikoo,valine,waline,livere这几个
其中,我一开始选择了valine,后来转向了waline,这是一款从 Valine 衍生的带后端评论系统。可以将 Waline 等价成 With backend Valine.由于后端的存在,waline管理评论,设置邮件提醒以及安全性等方面较valine有较大提升,由于waline官方文档介绍得很详尽了,推荐直接阅读官方文档,配置好了之后在主题配置文件的评论那里选择waline,然后在waline配置里输入url,我的配置如下
1 | # waline - A simple comment system with backend support fork from Valine |
效果如图
页脚美化
我们可能有向页脚添加文字的需求(比如备案号,广告,说明等等),这里提供两种方法,都需要修改/root/blog/themes/butterfly/layout/includes/footer.pug
这个文件
第一种方法
向文件最后追加下面的代码,注意if要与之前的的if对齐,ClassName是可以修改的类名
1 | if theme.ClassName.enable |
然后在主题配置文件的footer下追加以下代码,注意ClassName顶格
1 | ClassName: |
效果如图(以添加公网安备为例)
第二种方法
标签化写法,这种看起来更好看一点
首先在Shields.io上生成你自己的图标,向下滑找到Your Badge,填写label(左侧文字),message(右侧文字),color,生成链接
在之前的那个footer.pug追加如下代码,注意p与上面的if对齐
1 | p#ghbdages |
然后在主题配置文件里写一个ghbdage
类,我的配置如下
1 | ghbdage: |
效果如图
音乐与视频
音乐
说实话,我当初从melody转到butterfly就是因为butterfly自带吸底音乐播放器😂
所以在butter中添加音乐播放器Aplayer是很方便的,只要修改如下代码,其中,aplayer是音乐播放器,而pjax可以让页面切换时音乐继续播放
1 | # Pjax |
此外,还要在blog根目录下的配置文件中追加
1 | aplayer: |
对于音乐播放器的具体写法推荐阅读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>
,具体怎么写请参照文档
效果如图
如果要在文章内部引入音乐播放器,可以这样写{% meting "音乐ID" "netease" "song" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}
视频
对于视频,我只试过用html引入B站视频外链,配置如下
1 | <div style="position: relative; padding: 30% 45%;"> |
引入你的视频时,只需要在b站网页端分享按钮下找到嵌入链接,复制其中的aid,bvid,cid分别填入上面的代码即可
测试音乐和视频如下
看板娘
看板娘,我是照着这篇文章来的,可以自己去看看
搜索功能
搜索功能是参照这篇文章实现的,可以去看看
碎碎念界面
碎碎念是参照这篇文章实现的
(其实就是懒得写了吧喂 ̄へ ̄)
修改字体
想要修改字体,首先要下载字体的TTF文件,我是从方正字库下载的
然后把文件复制到主题的source文件夹下,在同时source/css下新建一个word.css,输入如下代码
1 | @font-face{ |
然后和刚刚添加社交图标类似,在inject的head下,引入- <link rel="stylesheet" href="/css/word.css">
接着,找到主题配置文件的font类,使用引入的字体,同时可以设置大小
1 | # Global font settings |
效果如下
更换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并实现预览功能了。