从0开始搭建博客

搭建方案：

• 框架：Hexo
• 主题：volantis
• 部署：
  • 前期：静态资源放在Github上托管，并在Vercel上进行部署
  • 后期：部署在个人服务器上
• 图床：七牛云OSS
• 文章格式：Markdown

1、安装Hexo初始化博客

确保本机环境已经安装node.js

进入Hexo官网:https://hexo.io/zh-cn/按照提示开始安装

进入cmd命令行工具输入以下命令:

1
2
3
4

# 全局下载hexo
npm install hexo-cli -g
# 初始化博客[Blog_Name]为自定义的博客名比如：hexo init MyBlog
hexo init [Blog_Name]

确保当前路径在桌面上，防止找不到生成后的文件

等待片刻后桌面上会生成一个文件夹里面有初始化的博客源码，文件夹名字就是刚才自定义的博客名

博客源码结构如图：

接着进入博客文件目录下载依赖和启动：

1
2
3
4
5
6

# 进入博客源码目录
cd [Blog_Name]
# 下载依赖
npm install
# 启动服务器，默认占用端口为4000，启动前请确保端口可用
hexo server

显示启动成功：

1
2
3

INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

在浏览器输入http://localhost:4000/即可访问博客

自此，博客初始化完成。

2、安装主题volantis

找到_config.yml文件，修改主题参数为volantis

1

theme: volantis

在博客目录文件下输入指令下载主题

1

npm i hexo-theme-volantis

下载完成后重新生成静态文件并启动服务器

1
2
3

hexo clean
hexo g
hexo s

如图所示则主题配置成功

3、配置Hexo将博客源码托管至GitHub

3.1、创建GitHub Page仓库来托管博客静态资源

new repository创建一个新的仓库，命名必须为用户名.github.io权限为public

3.2、配置自动部署

1
2
3

deploy:
  type: git
  repo: git@github.com:Punny520/Punny520.github.io.git,main

意思是自动部署到该代码仓库，且分支为main

3.3、下载自动部署插件

1

npm install hexo-deployer-git --save

下次完成后利用Hexo d进行部署

可以直接通过外网链接Punny520.github.io进行访问

4、配置域名

5、个性化配置

5.1、修改_config.yml博客网站配置

1

language: zh-CN #语言改成中文

5.2、新建一些必要的页面

首先source/_posts就代表是博客文章的页面，里面的md文件就是博客的文章的源文件，如果要创建其他页面，也需要创建对应的文件夹和index.md

我们通过 new page “页面名称” 来创建必要的页面文件夹和index.md

需要创建的有：

• 关于(about)
• 分类(categories)
• 标签(tags)
• 友链(friends)
• 404页面

归档(archives)页面会自动生成

对应指令：

1
2
3
4

hexo new page "about"
hexo new page "categories"
hexo new page "tags"
hexo new page "friends"

404页面在source文件下创建个404.md即可。

创建完毕后需要配置md页面的Front Matter详情见volantis页面配置教程

比如给页面Front Matter设置cover: true，表示页面带有封面

5.2、修改volantis主题配置

为了方便，在博客根目录创建主题配置文件_config.volantis.yml用于配置主题且不修改主题文件中的_config.yml文件

这部分为个性化配置，只需要了解每个参数对应是修改哪个部分，然后根据自己的喜好去调整即可。

5、七牛云图床配置