Hexo 博客的免费搭建
前言
本教程2017年1月写成,至今仍适用。稍后会补充小细节和技巧思路的文章。
独立博客现在已经不是很新鲜了,甚至是有点过时。现在很多的流量都是在移动端产生的,即使是写博客,也不会有很多人看,或者说根本没人看。但是,博客还是有其存在的道理的,有些东西发微博显得太简短,发朋友圈显得格格不入,这个时候博客就发挥了其最大的作用,既能起到记录的作用,又能分享和传播。
再者,独立博客会显得很高大上,像是技术宅才会弄出的东西,想象一下整个博客都是属于自己的,不用担心博客平台突然倒闭,因为部署的东西都在自己的电脑上,那就不用担心博客提供商跑路的问题,写起东西来都特别的放心。
Well,上面说的是独立的博客的优点和好处,我写这篇文章还是想在一定程度上帮助大家建立一个属于自己的独立博客的。虽然网上相关的教程还是有很多的,甚至官方的文档网站都已经非常完善和完备了。但私以为,教程写出来不一定都是为了分享的,也可以作为自己的回顾与反思的过程,或许下次自己有需要搭建的时候可以提供帮助呢。利人利己,何乐而不为呢?
准备材料
必备系列
- 1. 台式/笔记本电脑,Windows/macOS/Linux
- 2. 处于爱国上网的环境
- 3. Hexo官网:点击这里
备选系列
- 1. 域名,需要自行购买,价格几块钱到几百块一年不等。国内域名需要备案,国外域名不需要备案,备案需走流程大概半个月,国内推荐万网,国外可参考这里)
- 2. Hexo博客的主题,可参考点击这里
- 3. 七牛云账号(可作为图床)
- 4. MPic图床或PicGO,两者均可(配合七牛云图床使用,一键上传图片并获得图片地址),个人推荐后者。
具体步骤
配置好运行环境
先安装Node.js 和Git,具体安装的步骤很简单: 以管理员身份打开安装包,然后一直按下一步即可(如果是其他系统就相对比较麻烦,具体请参考Hexo官网指南:点击这里),安装完毕建议重启电脑。
安装hexo
- 1. 桌面上找到这个图标
,双击打开。
- 2. 然后在下面输入如下代码,建议逐行复制,然后依次回车确认。
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
npm install -g hexo-cli
- 3. 等待一段时间,因为前两行代码是把下载的服务器设置为国内的淘宝镜像,所以下载速度还算可以,如果有科学上网的话,建议直接输入第三行即可。
npm install -g hexo-cli
建站
在Git命令行中继续输入这段代码,具体我就不截图了,和上面的操作一致,每输入完一段代码之后就回车运行。
- 1. 初始化博客文件夹
hexo init *1234abc* (取你想要的名字)
1234abc
是我随便设置的,建议用英文或数字命名文件夹,避免未知问题的出现。另外init
你可以理解为初始化。这代码的意思就是新建一个名字叫「1234abc」的文件夹,然后往里面放独立博客所需要的东西。
- 2. 回车运行之后,继续输入
cd leotomato(你想要的文件夹名)
- 3. 可理解为浏览leo这个文件夹,也就是那个你自己改名字的文件夹。继续回车运行,并输入:
npm install
- 4. 接下来,如果对命令行有一定经验的人可以直接在命令行操作,如果不懂的话,可以进入该路径进行接下来的操作,可以通过“此电脑”打开以下路径。
C:\Users\用户名\*1234abc*
- 5. 如无意外,你会看到这些文件夹和文件,如果有的话,就证明你的hexo已经安装成功了。
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
预览一下自己搭建好的博客
- 1. 在命令行里依次输入以下代码,保险起见,首先先回到根目录
cd
- 2. 然后定位到你所创建的文件夹
cd 1234abc(你的文件夹)
- 3. 接着开启本地浏览
hexo s
- 4. 回车之后,可见到这个提示。
- 5. 打开浏览器,地址栏输入http://localhost:4000/ 并访问
- 6. duang的一声,你的博客出现在你的面前咯!
搭建在Coding或Github上
- 1. 因为国内网络环境的问题,我还是选择Coding ,下图以Coding为例,请谨记你的用户名,也就是个性后续。
- 2. 注册登录成功之后,进入“我的项目”,点击创建新项目
- 3. 新项目的设置按图所示操作,然后创建项目
- 4. 【重点】 生成SSH公钥,详细教程点击这里。简化教程是在Git Bash里,输入以下代码:
ssh-keygen -t rsa -b 4096 -C "你注册coding时的邮箱"
然后一直按回车就好,弹出的一路回车通过。接着,输入
ssh-add
生成的SSH公钥一般放在~/.ssh/id_rsa.pub,在Windows系统上,可以在“此电脑”找到以下路径,可找到id_rsa.pub文件
C:\Users\用户名\.ssh\id_rsa.pub
- 5. 完成上述过程之后,界面右上角“个人设置”点击进入,找到“SSH公钥”,把生成的id_rsa.pub 文件里面的内容复制到里面去。(可以使用必备材料里的notepad++打开该文件。
- 6. 完成上述步骤,可以用以下代码在Git Bash验证是否已经成功验证。
ssh -T git@git.coding.net
- 7.如果弹出如下提示,就证明已经成功验证了。
Hello shomyliu You've connected to Coding.net by SSH successfully!
- 8. 接下来,依旧在Coding页面进行操作,如图所示,进入新建的项目里,设置Pages服务,将部署来源设置成master分支。
- 9. 最后进入Hexo配置的环节,这是最后的大boss。
Hexo配置
- 1. 新建和完成SSH公钥的步骤之后,进入你所新建博客的文件夹,找到站点的配置文件_config.yml,用notepad++打开。
C:\Users\用户名\你新建文件夹的名字
- 2. 具体如图所示,详细的参数细节请点击这里
配置hexo的deploy方式
- 1. 在文件最低端加上deploy到coding的配置
deploy:
type: git
repo:
coding: git@git.coding.net:username/projectname.git,coding-pages
- 2. 其中的git@git.coding.net:username/projectname.git,coding-pages可从项目主页获取。如图所示,将获得的复制取代git@git.coding.net:username/projectname.git,coding-pages即可。
- 3. 修改之后的效果如下图所示:
- 4. 还有一步,就是在博客的source/目录下需要创建一个空白文件,至于原因,是因为 coding.net需要这个文件来作为以静态文件部署的标志。就是说看到这个Staticfile就知道按照静态文件来发布。具体操作为(“#”后面不需要复制):
cd 博客所在的文件夹
cd source/
touch Staticfile #名字必须是Staticfile
部署与发布
- 1. 开始发布你的博客在Coding上了(“#”后面不需要复制)。
cd
cd 博客所在的文件夹
hexo g #生成博客静态文件
hexo d #部署博客静态文件到Coding
- 2. 这样就把你的博客部署到Coding上了,现在打开你的浏览器,输入:
你的用户名.coding.me
或
你的用户名.coding.me/项目名
- 3. 具体可参考我的图片。
- 4. 因为我在之前把项目分支设置成“master分支”,所以“你的用户名.coding.me”也可以直接登录你的博客。
如何开始写博客?
首先,hexo的博客文章撰写是基于markdown语法的,具体语法的教程可以参考markdown入门。十分钟就可以入门和上手了,很简单。
- 1. 平时新建博客文章,可以在Git Bash用以下代码来实现:
cd 博客所在文件夹
hexo n “文章名称”
- 2. 然后你就可以以下路径找到你新建的文章,详细的写作指令可以看官方的文档
C:\Users\你的电脑用户名\你博客文件夹的名字\source_posts
- 3. 你应该会在文件夹里面找到.md扩展名的文件,用notepad++就可以打开编辑了。你平时写文章也可以通过notepad++在所新建的.md文件里写。写完之后,通过以下代码就可以把你的文章部署到Coding了,也就是你的博客上。
hexo clean
hexo g -d
简述流程
- hexo n 文章名
- 进入C:\Users\用户名\你博客文件夹的名字\source_posts,找到“文章名.md“
- 用notepad++打开文件,通过markdown语法撰写文章
- hexo clean && hexo g -d
- 发布完成,浏览你的博客网站看效果。
本教程参考了以下文章
感谢~