Document

title: 搭建个人博客 date: 2022-04-24 05:18:28 tags: 博客

构建一个个人网站需要什么?

一台服务器

一个公网IP

网页的源代码

但是如果是对于新手来说显然并不适合从零开始构建,租服务器需要钱,网页源代码编写需要了解前端的知识,这无疑需要一段时间的学习

好在目前有很多现成的网站搭建方法和教程供小白使用,我也是从零开始构建的这个网站,整体的框架都已经搭建好了只需要在上面补充你需要的内容即可,省去了很多麻烦

Github可以快速利用 Jekyll 来构建网页, 不过这个博客并没有采用这种方式,而是使用了 hexo 来构建网站,也十分快捷方便. Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架

准备阶段

nodejs LTS版本

hexo npm install -g hexo-cli

SSH 连接 GitHub

如果尚未安装可以参考博客构建教程,这篇文章非常详细,这里不再赘述

博客初始化

下载hexo
```
npm install -g hexo-cli
```

初始化
```
hexo init myblog
```

进入文件夹并安装依赖
```
cd myblog
npm install
```

生成静态文章
```
hexo g
```

启动服务
```
hexo server
```

打开浏览器,输入 localhost:4000 查看初始化的文章

可是现在也只能在我的主机上访问这个静态页面,其他人并不能看到,我希望文章内容能被更多人看到.

虽然已经创建了一个基本的博客主页,但显然现在并不能满足我们的需求,因为可能需要写很多文章,一个页面有些单调.

我们也希望能使用一个看起来更美观一些的界面,计算机专业文档的编写习惯于使用markdown格式,现在的博客markdown格式的有些难看

文章我们也希望能够井井有条,最好能更加有层次结构,分目录分模块

最好还能像 CSDN 知乎博客园那种专业的网站那样,可以有一些更好更有趣的功能

博客进阶

首先解决第一个问题,如何让其他人访问我的博客
很显然我们需要一个服务器提供一个公网IP,最好还能有一个属于自己的域名,这样其他人就可以直接搜索 www.kamilu.com就能直接访问到我的博客了,但这种方式并不划算. 首先租服务器需要钱,购买域名也需要钱,开始的几年是比较便宜的,但后面时间越长价格逐年攀升,如果只是新手的话完全没有必要花这个冤枉钱,计算机精神讲的就是一个开源免费无广告
Github 提供了 pages 模块可以方便我们完成这一过程, 新建一个仓库,命名为 <username>.github.io,这个仓库就可以提供一个公网IP以供其他人访问
接下来将刚刚的博客部署到GitHub,配置 _config.yml 文件,在结尾加入
yaml是两个空格缩进,branch可以使用master分支也可以是main分支,这个没什么影响,我的这个博客main分支用于README文件介绍了,将内容全部放在了master分支中了
```
deploy:
```
type: git repo: https://github.com/YourgithubName/YourgithubName.github.io.git branch: master
```
安装 deplot-git
```
npm install hexo-deployer-git --save
```
- 清除之前生成的内容
```
```
hexo clean
```
- 重新渲染生成静态网页
```
hexo generate
```
- 将网页内容部署到GitHub仓库上,GitHub会自动解析内容并更新
```
hexo deploy
```
后面两步可以简写合并为一步 hexo g -d
成功上传之后可以在GitHub仓库的 Actions 中查看状态, 当黄色圆圈变为绿色时表示已经部署完毕,接着就可以直接访问 <username>.github.io 查看你的博客了,这和之前使用 hexo server 部署到本机 localhost:4000上的完全一致,并且其他人也可以通过<username>.github.io访问你的博客
<username>.github.io 内容有时候没有更新是因为缓存的原因,需要强制 F5 刷新一下

这么多文件我也不知道该干什么啊? 这都是干什么用的啊?
这里简单分析一下整个 hexo 文件夹的结构:
- package.json: package用于包管理,记录了所有的下载项,使用 npm install 下载的内容都会记录在这里,例如我使用的主题 melody
- _config.yml:这个文件很重要,是整个项目的配置文件,记录了配置信息. 之前我们添加的 deploy-git 插件就是把相关配置信息添加到了这里
- source: 这个文件夹是所有的源文件,里面有一个 _posts 文件夹为所有展示的文件,类似于 public.
```
hexo new <filename>
```
  这一步会在 _posts 下创建一个新的markdown文件,文件名为
- public: 如果你比较细心的话你会发现, public的内容就是我们上传到GitHub上的内容,在本地执行 hexo clean 时也会删除这个文件夹,并在 hexo g -d 后重新生成,你可以把它理解为hexo将你的配置信息和功能模块编译,结果保存在 public
- node_modules: 这里就是所有通过npm下载的包的位置

不想使用现在的界面,怎么更换一个好看一些的主题呢?
hexo 提供了主题平台,可以在上面筛选你想要的主题,不过并不是每一个主题的作者都很详细的写了如何配置如何替换现在的主题,这会给新手带来一定的困扰.
我目前使用的主题是fluid,使用文档说明文档可以说是相当的详细了.我看好的是它可以直接支持 mermaid 的markdown书写,这个我很喜欢
这里顺便记录一下其他的我比较喜欢的主题:
- quiet 简约扁平化
- melody) 我的上一个主题,也非常好.这个主题干净简洁,功能丰富,作者开发经验丰富.我很喜欢这个主题,并且作者提供了一份非常详尽的使用文档,清晰明了易于上手.
如果你并不喜欢这个主题或者希望选用其他主题,那么首先你能找到这个作者的主题的Github地址.具体方法就是一般主题的作者都会在该主题下留一个GitHub的Icon,点击该图标就可以看到作者的主页,进去找到这个项目地址,查看README文件跟着作者的说明走即可.
有的厉害的主题直接提供了 npm install 下载,有的则是需要 git clone,效果相同. 生效办法就是修改你目前文件中的 _config.yml 中的 theme: 选项为作者的这个名字,然后在修改一些地方的基本信息,具体要看该主题的说明文档

怎么加一些特殊的功能呢? 比如评论,点赞等等.这要看这个主题的作者是否做了该部分,如果没有做的话那估计要自己写了~ melody主题完成了该部分且使用起来相当简单,详见其说明文档

构建一个个人网站需要什么?

准备阶段

博客初始化

博客进阶

相关参考