前言
2020年伊始,给自己设定了一些年度目标,其中之一就是在今年开始搭建自己的个人博客,记录和分享一些学习总结和工作经验,希望自己可以有一些沉淀和积累吧,同时,也希望给大家带来一点点帮助。
在这个背景下,我开始搭建自己的个人博客。
以下是我个人搭建博客的流程和心得。
(备注:本人操作系统为mac,部分操作在windows下会有一些不同。)
环境准备
安装Git
由于需要上传文件到Github,因此我们本地必须安装git.
# 安装git
brew install git
# 查看安装版本
git --version
安装NodeJs
我们要搭建的Hexo博客是基于NodeJs的,中间会有很多操作依赖其中的npm工具。
# 安装
brew install node
# 查看安装版本
node -v
安装Hexo
Hexo是一个强大博客框架,能够帮助我们完成博客的快速搭建,支持MarkDown书写博客。
# 安装hexo
npm i -g hexo
# 查看版本
hexo -v
博客搭建
创建博客仓库
在github中创建一个名为yourUserName.github.io
,其中yourUserName是你的github用户名。
示例图:
备注:由于我的仓库中已经存在了对应仓库,所以截图会有红色提示,读者在搭建时注意仓库名称前缀和自己的username保持一致。
创建博客框架
接下来我们需要在本地来初始化我们的博客框架。
# 创建本地的博客目录
mkdir ~/blog
# 进入目录
cd ~/blog
# 执行博客框架初始化
hexo init
完成初始化后目录下会有以下文件或目录,对应的内容如下:
- node_modules:框架依赖包
- public:存放生成的博客页面
- scaffolds:用命令生成文章使用的模板
- source:存放命令创建的博客或者依赖的文件资源
- themes:放置博客的主题文件
- _config.yml:博客框架的配置文件
- db.json:source解析所得到的数据文件
- package.json:项目所需模块项目的配置信息
本地博客框架完成后接下来就需要进行博客配置修改。
关联GitHub博客仓库
首先我们要做的是建立本地博客和github博客仓库的关联。
在blog根目录下,找到生成的_config.yml文件,修改对应的部署配置:
deploy:
type: git
repo: https://github.com/Git-Aries/Git-Aries.github.io
branch: master
其中还有一些site及个人信息相关的字段,这里不赘述。完成配置后,我们需要安装hexo部署到git的插件
npm install hexo-deployer-git --save
本地执行以下操作:
# 清理
hexo clean
# 生成静态博客文件
hexo generate
# 部署到指定github博客仓库
hexo deploy
执行完成后,耐心等待1-2分钟,在浏览器中访问我们的博客地址http://yourGithubName.github.io
,可以发现我们的博客就完成初步搭建了。
备注: yourGithubName替换为你的github用户名。
本地调试
在绝大多数情况下,我们需要先自己确认博客内容能正常展示,再发布到github博客仓库。这时候我们可以执行hexo server
,在本地起一个hexo服务进程,然后在浏览器访问http:127.0.0.1:4000
,同样可以访问我们的博客主页。
通常情况下,本地调试时,修改博客后直接刷新浏览器页面就可以更新博客内容,但是如果修改的是博客框架配置,则需要重启本地hexo server才能生效。
# 查询hexo服务进程
ps aux | grep hexo
# 沙雕hexo server进程
kill -9 pid
# 重启服务
hexo server
主题配置
Hexo的默认主题是landscape
,这个主题也许不合你的心意,但是Hexo维护了自己的主题平台,里面有很多博客主题可以下载,此外Github上也有很多开发者开发了很精美的博客模板,笔者的博客模板也是在github上下载的,这里给作者打个广告,对作者表示感谢!
- Litten的博客,主题yilia
- 思伟的博客,主题yilia-plus
主题yilia-plus是在yilia主题基础上进行了优化和部分功能扩展。
OK,下面继续正题, 来讲一下主题切换的配置:
# 切换到本地博客目录
cd ~/blog
# 下载对应的博客主题到themes目录下,
git clone https://github.com/JoeyBling/hexo-theme-yilia-plus.git themes/yilia-plus
切换主题配置,在博客框架的配置文件_config.yml中找到主题配置项修改为theme: yilia-plus
.
每个主题也有自己的配置文件,进入themes/yilia-plus目录下,找到_config.yml文件,根据注释按照自己的需求进行修改,完成修改后重新发布即可。
个人博客搭建类的心得就分享到这里,后续会慢慢更新一些利用Hexo写博客的心得吧,没有写博客的经验,很多东西说的比较粗糙,也希望得到你的谅解!再次推一波我的个人博客,暂时还没开通评论功能,一定尽快开通来支持你的吐槽,哈哈···