记录一下博客搭建历程
本文最后更新于:2022年11月18日 中午
前言
19年8月份开始部署自己的独立博客到现在已经过去了10个月了,这期间断断续续做了很多修改,也踩了很多坑。这几天换了个域名,换了个主题,完全重新部署了博客,现在用起来感觉还不错,应该会持续用一段时间,所以现在写这篇文章总结一下博客部署的细节过程,避免我这个记性不好的人过段时间就不记得自己是怎么操作的了😂,网上有很多大佬写的Github Pages + hexo部署博客的教程,我这里主要是记录我自己的操作步骤和一些我自己的理解。我不是一个专业的前端程序员,所以如果在看这篇文章的大佬发现了错误,请指出。
最早部署博客的时候,我还是一个大一的学生,很多东西都不太懂,在网上看了很多关于部署博客文章,明白了部署博客的方法之一就是用现有的框架,然后自己做个性化的调整,找了一圈发现目前比较流行、搭建简单适合我这个蒟蒻的框架是hexo,看了官方文档和其他大佬的搭建教程,就开始找好看的主题了,去年部署使用了闪烁之狐大佬的matery主题,作为一个喜新厌旧的渣男这么几个月过去了有一些视觉疲劳了😂,现在改成了zkqing大佬的Fluid,这个简洁又有设计感的风格,很是喜欢。
hexo是一个基于nodejs的静态站点生成框架,不仅搭建简单,还可以将生成的博客直接上传到github、gitlab、gitee这些提供Pages服务的平台(下面会对Pages服务做介绍)服务建立静态站点,而且社区生态活跃,有大量有趣实用的插件可供下载。通过hexo,即使我们不怎么会HTML也可以用markdown写出工整的文章,markdown是一种轻量级的标记语言,文件扩展名是“md”,就是在项目文件里常见的README.md文件使用的格式。markdown的语法超级超级超级简单,没有哪个正常人20分钟还学不会基础语法的吧,不会吧,不会吧。话说回来markdown只是一个语法规范,所以我们还需要一个工具来辅助我们编写markdown文件,强烈推荐Typora,不用像vscode那样分屏预览,所见即所得的书写体验是真的awesome。
“You can create a website directly from a GitHub repository.”,这是Github Pages官方文档里面的介绍,我们可以直接从Github仓库创建静态网站,通过Github Pages,我们就可以不用自己维护一台服务器来托管博客,省钱又省心。
全程使用的是window10环境。
准备工作
安装nodejs
在这里下载适合自己的nodejs。
安装过程一路next
就可以了,但是如果你觉得不放心那就自己选择。
安装完成后打开终端,输入:
node -v
npm -v
看到输出版本号就可以了。(-v
改成--version
也是一样的)
npm是nodejs默认的包管理工具,我们需要用npm来安装hexo以及一些插件。
添加国内镜像
如果没有梯子的话,可以使用阿里的国内镜像下载,这样速度会好很多。
npm config set registry https://registry.npm.taobao.org
这条命令会写入https://registry.npm.taobao.org
到C:\%USERPROFILE%\
目录下的.npmrc
文件,也可以直接用文本编辑器编辑.npmrc
文件。
安装Git
Git是当今最流行也是最好用的版本控制工具之一,我们在这里使用Git是为了把本地生成的静态页面推送到github(也可以使用其他平台,或者同时使用)。
在这里下载适合自己的Git。
安装过程还是一路next
就可以了,但是如果你觉得不放心那就自己看着办。
安装完成后打开终端,输入:
git --verison
添加代理
git没有国内镜像(这个要是有国内镜像那是真的强/狗头),如果没有梯子的话,那git clone
可能会很慢,有梯子可以设置一下代理,如下:
全局代理
# socks5协议,1080端口修改成自己的本地代理端口
git config --global http.proxy socks5://127.0.0.1:1080
git config --global https.proxy socks5://127.0.0.1:1080
仅代理github
# socks5协议,1080端口修改成自己的本地代理端口
git config --global http.https://github.com.proxy socks5://127.0.0.1:1080
git config --global https.https://github.com.proxy socks5://127.0.0.1:1080
上面的命令会在C:\%USERPROFILE%\
目录下的.gitconfig
文件写入
[http "https://github.com"]
proxy = socks5://127.0.0.1:1080
[https "https://github.com"]
proxy = socks5://127.0.0.1:1080
用编辑器写入也是可以的。
连接Github
配置个人信息
打开git bash,输入如下命令,注意替换用户名和邮箱。
git config --global user.name "username"
git config --global user.email "email"
写入的和前面添加代理的是同一个配置文件,同样也可以用编辑器写入。
[user]
name = username
email = email
生成SSH
执行如下命令
ssh-keygen -t rsa -C "email"
这个命令会在你的用户文件夹下的.ssh
文件夹下生成id_rsa
和id_rsa.pub
文件,前者是你的私钥,后者是公钥,接下来就是把公钥提交到Github上,这样就可以安全的传输了。
使用命令cat ~/.ssh/id_rsa.pub
,或者用编辑器打开id_rsa.pub
文件都可以,复制里面的全部内容。
回到github,点击如下图所示的setting
,然后点击SSH and GPG keys
然后点击New SSH Key
,名字自己决定,内容就粘贴刚刚复制的公钥。
最后执行下面的命令查看是否成功
ssh -T [email protected]
如上图所示,输出了Hi username!
,那么就成功了。
创建博客仓库
不会还有人需要注册github的详细步骤吧,不会吧,不会吧。
在github首页点击右上角的+
号,选择New repository
然后在如下页面中填写仓库名(Repository name)
**一般这里的格式都是且必须是username.github.io (username就是前面
Owner
里面显示的名字)**,原因如下。仓库名命名为
username.github.io
那么访问通过该仓库创建的博客的默认域名就是username.github.io
。仓库名命名为
xxx.github.io
,访问地址就是username.github.io/xxx.github.io
。
我的username是oopstls,但是这里我用sameple.github.io
作为样例。
Description
是对这个仓库的描述。
后面的README
一定要勾选,不然后面不能初始化Github Pages。
Imgbot
是我用来给我的github图床里面的图片压缩的,没有使用过就没有这个选项,不影响后序操作。
然后点击下面的绿色按钮Create repository
。
然后点击仓库的setting
。
向下翻找到Github Pages
,点击choose a theme
。
然后直接点击select
,不用去选主题了,这里只是通过选主题激活Github Pages
然后在刚刚Github Pages设置的位置就会显示你的默认链接。
点击进去就是Github Pages为你生成的个人页面。
安装初始化Hexo
安装Hexo
打开一个已经配置好可以执行npm命令行终端,可以直接用前面安装的git自带的Git Bash。
输入如下命令安装hexo命令行工具。
npm i hexo-cli -g
输入命令后如上图所示就安装成功了,也可以再输入命令hexo -v
看看。
初始化Hexo
在你想用来存放博客文件的存储路径上新建一个文件夹,这个文件夹用来存储博客文件,比如D:\Blog\
。
然后再这个目录下打开终端,或者cd /d/blog
(注意这里是我的目录路径,以当前自己的为准,不能随意复制)
然后执行下面这条命令初始化你的博客文件。
hexo init sample
sample是生成后存储文件的文件夹
命令执行完成显示上图所示内容就可以了。
接着就执行npm install
安装必要的组件。
npm install
安装完成没有报错的话,那基本环境就配置好了。
介绍几个后面会常用的命令,也可以在官方文档查看更多。
hexo clean #清除已经生成的静态站点文件,最好每次生成之前都clean一下
hexo generate #生成静态站点文件
hexo g #上一个命令的简写
hexo server #启动服务器。默认情况下,访问网址为: http://localhost:4000/
hexo s #上一个命令的简写
hexo deploy #部署网站,需要先generate生成静态文件才能部署
hexo clean && hexo g && hexo s #本地测试的时候可以这么写
现在执行hexo g && hexo s
然后打开浏览器,在地址栏输入localhost:4000
,就可以看到初始博客页面了。
目录结构
根目录
├── _config.yml #博客配置文件
├── node_modules
├── package-lock.json
├── package.json
├── scaffolds #草稿、文章模板、页面模板
├── source #资源文件夹
└── themes #主题文件夹
source目录下
没有的文件夹不是自动生成的,而是推荐使用方式(后面介绍)
├── source
│ ├── CNAME #自定义域名
│ ├── _data #覆盖主题配置
│ │ ├── fluid_config.yml #fluid主题覆盖配置
│ │ └── fluid_static_prefix.yml
│ ├── _posts #文章存储文件夹
│ │ └── helloworld.md
│ ├── about #自定义关于页
│ │ └── index.md
│ └── img #作为主题的图片资源文件夹
│ ├── avatar.png
│ ├── banner
│ ├── favicon.png
个性化
更换主题
前面hexo初始化完成之后,默认使用的是landspace
主题。除了自带的主题外,hexo官网还罗列了很多好看的主题可供查看和使用。
选择自己喜欢的主题,下载至/theme
文件夹,然后再/_config.yml
文件中修改theme: landspace
,将landspace改为主题存储的文件夹名。
在hexo5之后,可以直接使用npm命令下载主题,但是下载的主题是存放在/node_modules
文件夹下的,需要自定义修改一些东西的时候不是很方便(只改配置文件可以在/source/_data/
下覆盖主题配置文件)。
不同的主题配置方式各不相同,hexo官网列出的主题大多都有较详细的配置说明,可以在主题的github仓库查看README.md文件。
我现在(至文章最后一次更新)使用的是Fluid,主题安装过程以及配置过程就不具体演示了,官方说明非常详细。
生成以及上传
前面已经介绍过博客的生成命令。
这里再贴一下。
hexo clean #清除已经生成的静态站点文件,最好每次生成之前都clean一下
hexo generate #生成静态站点文件,生成内容在根目录下的public文件夹内
hexo g #上一个命令的简写
hexo server #启动服务器。默认情况下,访问网址为: http://localhost:4000/
hexo s #上一个命令的简写
hexo deploy #部署网站,需要先generate生成静态文件才能部署
hexo clean && hexo g && hexo s #本地测试的时候可以这么写
hexo deploy
需要先安装对应平台的deploy插件
如github pages,需要执行下命令安装插件。
npm install hexo-deployer-git --save
当本地测试完成之后,执行hexo d
即可上传至仓库。
绑定域名
github pages默认的域名是username.github.io
。
建议改为自己的域名的几个原因:
- 不够个性化
- 不能做cdn加速(国内访问gituhb.io很慢)
- 上一条说访问慢,现在貌似已经被墙了(202008xx),不改域名想访问只能修改自己本机的DNS。
购买域名
在国内几个大厂都可以购买,如阿里云、腾讯云、百度云…
购买域名的详细过程大概就是实名、选域名、买域名。
无脑操作,具体过程就不赘述了。
Cloudflare
我这里以阿里云为例
注册cloudflare
注册过程就不详细展示了
添加站点
填写购买的域名,然后点击添加站点,然后无脑下一步,直到提示修改DNS服务器。
修改DNS服务器
打开阿里云域名控制台,点击准备好的域名。
然后点击DNS修改、修改DNS服务器
将刚才Cloudflare给出的两个域名解析服务器粘贴至这里。
点击确定之后返回Cloudflare点击检查。
等cloudflare检查完成之后执行下面的操作,这个过程会等几分钟到几个小时不等。
解析加速
上面点击DNS,然后添加记录,两个记录都是CNAME,分别填入域名和www。确定后面的代理状态为开就可以了。
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!