作者:小傅哥 博客:https://bugstack.cn

沉淀、分享、成长,让自己和他人都能有所收获!

一、前言

压测了,小傅哥一天能搭4个博客!

好学、乐学、博学、恒学、会学和用学,学以致用。一起学习成长的很多同好以及我自己,都是同样喜欢折腾的人。

最早大家都喜欢倒腾自己的QQ空间,装修的各式各样,可那炫耀。但终究这个QQ空间里面,还有很多东西不能让自己随意摆弄。不知道是不是此类好奇和爱好,让很多人走上了编程开发的道路。

就折腾博客而言,在大学开始就不停的折腾。从一个网页能被宿舍人访问、被校友访问、被家人看到,那个兴奋劲还是十足的。哪怕是半夜也是一遍遍的折腾写着html,虽然丑了吧唧的!


最近有不少粉丝问小傅哥,自己也想搭建个自己的博客系统写写文章,但不知道怎么弄。正好小傅哥也确实折腾过各种博客的搭建,了解一些坑坑洼洼,算是给后面的司机开开路。

本文主要向大家介绍

  1. 4类静态博客,hexo、docsify、jekyll、vuepress,的差异和特点
  2. 在 GitPage 上部署自己的博客
  3. 独立域名 个人服务器,部署博客
  4. 另外小傅哥把这些博客脚手架统一放到GitHub仓库,方便大家使用时候可以更方便。关注公众号:bugstack虫洞栈,回复:博客系统

有了这些参考,大家就可以选择适合自己的博客系统了,开心的写博客。

二、你要准备的东西

综上,是每一个人建博客的不同目的和需要的内容,按需选择即可。

另外,GitPage配置参考:https://docsify.js.org/#/zh-cn/deploy 在Github的配置中,可以选择根目录和docs两个文件夹,作为静态博客的仓库。所以在选择下面四类博客中,都是把docs文件夹预留出来,方便使用。

三、4种博客的搭建

程序员如何做一个自己的网站 程序员自己建个博客很简单(1)

1. hexo

程序员如何做一个自己的网站 程序员自己建个博客很简单(2)

http://hexo.blog.itedus.cn/

npm install hexo-cli -g hexo init blog cd blog npm install hexo generate # 生成 hexo server # 启动服务

2. docsify

程序员如何做一个自己的网站 程序员自己建个博客很简单(3)

http://docsify.blog.itedus.cn/

npm i docsify-cli -g # 全局快速安装 docsify init ./docs # 初始化项目 docsify serve docs # 本地预览

3. jekyll

程序员如何做一个自己的网站 程序员自己建个博客很简单(4)

http://jekyll.blog.itedus.cn

Fork code and clone Run bower install to install all dependencies in bower.json Run bundle install to install all dependencies in Gemfile Update _config.yml with your own settings. Add posts in /_posts Commit to your own Username.github.io repository. Then come back to star this theme!

4. vuepress

程序员如何做一个自己的网站 程序员自己建个博客很简单(5)

http://vuepress.blog.itedus.cn

npm install -g vuepress # 安装 vuepress build docs # 构建,生成html,可以用于部署 vuepress dev docs # 启动,http://localhost:8080/

四、部署到自己的服务器

vuepress的博客项目放IDEA中打开和日常维护就可以了,而且IDEA只提供了FTP的功能,也可以方便上传服务到远程服务器。

关于域名和服务器等需要购买,另外还需要备案才能正常使用。如果你想域名有一个小锁头的安全提示,则需要ssl证书,一般可以免费获取。

其实小傅哥已经有一个 bugstack.cn 博客,本次是又申请了一个新的域名 itedus.cn 想着再搭建一个玩玩,折腾!

1. IDEA 配置 FTP

在IDEA的菜单栏上,Tools 中有一个 Deployment 的选项,可以配置FTP以及其他SFTP。

程序员如何做一个自己的网站 程序员自己建个博客很简单(6)

IDEA 配置 FTP

2. 上传静态网页

程序员如何做一个自己的网站 程序员自己建个博客很简单(7)

上传静态网页

五、总结,