扯一扯怎么整一个高大上的个人博客

前言

多年没写博客,总是想着坚持下去,却总有各种理由阻碍自己。其实总结下来,就是一个字,

其实写博客好处多多,可以有效提高我们的写作、总结能力,并且可以给自己做记录便于回顾,还可以将自己的观点或者实践分享给大家,帮助他人,提升自己,何乐不为呢?

很多类似 CSDN博客园简书 等等平台都可以写文章并分享,但是似乎都不满足我的需求 … 其实我的需求也很简单,比如:好看、好看、好看、免费开源、支持 Markdown

根据以上需求,搜刮了一圈,终于找到一些还算靠谱的项目,于是有了这个博客,也有了这个博客的第一篇文章。

项目列表

  • Hexo:一个快速、简单、强大、开源的静态博客框架,可以很方便的生成静态文件,并无缝支持 Git、Pages 服务,基于 NodeJs ,支持 Markdown 语法。
  • CODING:由于 GitHub 访问速度不理想,这里选择了国内的 Git 仓库服务 Coding ,拥有好看、好看并且好看的 WEBUI,支持 SVN、Pages 等服务,提供免费私有仓库,并提供单项目 1GB 存储空间。
  • Theme Next:一款相当漂亮、漂亮并且漂亮的 Hexo 开源主题,提供包括中文在内的多语言支持,支持集成很多第三方服务,提供一些内置标签实现特殊效果。
  • 多说:第三方服务,提供评论和转发服务。
  • CNZZ:第三方服务,提供网页流量分析功能。
  • LeanCloud:第三方服务,提供结构化数据存储功能,用于统计文章阅读量。

Pages 服务是一个免费的静态网页托管和演示服务。您可以使用 Coding Pages 托管博客、项目官网等静态网页,还可以绑定自定义域名。

部署过程

基于 macOS 部署,其他平台请脑补

安装 node

1
brew install node

安装 git

1
brew install git

安装 Xcode 会自动要求安装 Git

安装并初始化 Hexo

1
2
npm install -g hexo-cli
hexo init <博客目录>

初始化完成的目录

1
2
3
4
5
6
7
8
<博客目录>
├── _config.yml //博客配置文件,您可以在此配置大部分的参数。
├── package.json
├── scaffolds //模版文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。
├── source //资源文件夹是存放用户资源的地方。
| ├── _drafts
| └── _posts
└── themes //主题文件夹。Hexo 会根据主题来生成静态页面。

安装 Next 主题

1
2
cd <博客目录>
git clone https://github.com/iissnan/hexo-theme-next themes/next

需要修改博客配置文件 <博客目录>/_config.ymltheme 配置项以启用主题

1
2
3
4
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next

写篇文章

1
hexo new "<文章标题>"

命令将在 /source/_post 添加 <文章标题.md> 文件,直接编辑即可

生成并启动测试站点

1
2
hexo generate
hexo server

测试站点默认访问地址为: http://localhost:4000

第三方服务集成

见 Next 官方文档

启用 Pages 服务

  • Coding 上创建一个与您的用户名(Global Key)相同的项目。
  • 进入私有项目页面,点击左侧栏的 代码 面板 ,选择 Pages 服务 一项可以看到部署 Pages 的设置。
  • 填写你想部署的分支(默认为 coding-pages ),点击 立即开启 ,稍等片刻即可完成部署并通过 <用户名>.coding.me 访问。
  • 在开启 Pages 服务后,在部署页面输入你想绑定的域名,并把域名 CNAMEpages.coding.me 即可通过你的自定义域名访问。

发布博客网站

修改博客配置文件 <博客目录>/_config.ymldeploy 配置项使用一键发布功能

1
2
3
4
5
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: git
repo: <Git 仓库地址>
branch: <Pages 服务部署分支>

执行发布命令

1
2
3
hexo clean //清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo generate //生成静态文件
hexo deploy //发布网站

最后

我的博客
官方示例
主题设置
主题特性配置
Hexo文档

有任何疑问和建议可以留言,将在第一时间为你解答

张小宝 wechat
欢迎交流,请备注来意。谢谢!
坚持原创技术分享,您的支持将鼓励我继续创作!