发现在VPS上部署Hexo博客看着太麻烦了,还是本地配合Github搞吧,这样既不失装B还能超低成本有自己的一个博客,不用自己出服务器钱,不用担心被攻击,如果你不要独立域名直接就是0成本!
在dalao界Hexo博客一直令我等鶸膜拜,在网上找了很多资料后终于搞定了Hexo的博客,以后也可以装B去了。不过你要是不差钱,就是个小白还是用WP吧,这玩意用着其实挺别扭的。。。
Table of Contents
- 一、Windows 10上的部署
- 二、Hexo的使用
- 三、配置Github Pages或Coding Pages
- Github的配置方法
- Coding中的配置方法
- 四、部署你的博客
- 五、独立域名绑定
- 六、其他辅助工具
- 七、扩展阅读
- 八、参考文章
- 九、总结
一、Windows 10上的部署
本次以比较流行的Win10为例,Win7、8也差不多,XP直接打死。
1.安装Git
Git是上传到Github的工具,如果在Github上有项目都会用到这个。
下载:https://git-scm.com/download/win 选择对应系统的版本即可,一路下一步,记住选择几个功能,这样操作更像是在Linux Shell里操作。
Use Git from Bash only
、Checkout Windows-style,commit Unix-style line endings
、Use MinTTY(the default terminal of MSYS2)
2.配置Git
安装好后需要几行命令说清楚你是谁,这样才能认对人。自行替换自己的用户名和邮箱。
git config --global user.name "Your Name"
git config --global user.email "email@example.com"
3.生成密钥文件
这个操作加密你的通信过程,同时后期上传到Github都会用到。
ssh-keygen -t rsa -b 4096 -C "email@example.com"
按3次回车,全部无视,证书文件会在C:\User\用户名.ssh 生成两个文件。
4.安装NodeJS
去官网下载NodeJS Windows版本,建议选择LTS版本,https://nodejs.org/en/,安装的时候务必选择Add to PATH选项。
5.安装Hexo
在Git程序里运行命令行即可安装
npm install -g hexo-cli
至此在Win上的部署安装已经完成,接下来就是如何使用了。
二、Hexo的使用
1.新建站点
假设代码存放在D:\hexo\blog
cd /d
mkdir hexo
cd hexo
hexo init blog
cd blog
npm install
在D:\hexo\blog 里就能看到所有文件了,下面是文件说明:
目录名称 | 说明 |
---|---|
scaffolds | 模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。 Hexo的模板是指在新建的markdown文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。 |
source | 资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。 |
themes | 主题 文件夹。Hexo 会根据主题来生成静态页面。 |
_config.yml | 网站的 配置 信息,您可以在此配置大部分的参数。 |
package.json | 应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装,您可以自由移除。 |
2.Hexo的配置
(1)替换主题
推荐NexT主题,这是一款知名的Hexo主题,非常漂亮简洁。
cd /d/hexo/blog
git clone https://github.com/iissnan/hexo-theme-next themes/next
回到根目录,找到_config.yml 文件,在第66行的theme字段里把默认主题名字换成next即可。
(2)插入图片
Markdown
支持插入本地图片或外部链接图片,要保证本地和网络上都能访问图片,使用hexo-asset-image
# 安装插件
npm install https://github.com/CodeFalling/hexo-asset-image --save
启用插件,确保主题配置文件D:\hexo\blog\_config.yml中
post_asset_folder: true
# 新增博文后,会在D:\hexo\blog\source\_posts目录下生成 xxx.md 和 xxx 目录,将图片存放该目录中,使用时 ![](***.jpg),这样Typora预览和发布到网上时Hexo博客都能正常显示图片
3.新建博文
hexo new "Hello World"
在目录D:\hexo\blog\source\_posts
下会生成Markdown文件Hello World.md
手动添加Markdown文件到D:\hexo\blog\source_posts目录效果一样
4.本地预览
如果以后修改了主题和写了一篇新文章都可以使用这个方法在本地查看,解决BUG。
cd /d/hexo/blog
# 生成静态文件
hexo generate
# 启动本地服务器
hexo server --debug
打开浏览器,输入http://localhost:4000 即可看到站点的预览了。
提醒一点,生成静态化可以使用简化命令
hexo g
在后面的上传到Github中,如果你发现明明写了一篇文章,但是网站却没有?那么一定是MD的语法有问题,生成静态化文件的时候就会报错,务必检查一下哪里出问题,修复后才能成功上传和展现文章。
三、配置Github Pages或Coding Pages
Github比较出名些,Coding是国内的平台,和Github基本差不多,如果担心访问速度或者其他原因可以选择国内的。
Github的配置方法
1.注册并登录Github帐号。
新建一个仓库,建好后可以在仓库首页的Setting里修改为:yourname.github.io
2.添加SSH KEY
点击Github右上角的头像,有个Setting,找到SSH and GPG keys,新建一个New keys,随便起名,把密钥内容复制进去。密钥是啥?就是最开始生成的那个密钥,id_rsa.pub文件。
3.测试SSH连接
在本地的Git中执行,
ssh -T git@github.com
如果出现Hi username! You've successfully authenticated, but GitHub does not provide shell access.
提示,则表示连接成功。如果不行就重新生成一个密钥再重新上传密钥试试。
Coding中的配置方法
Github免费用户只能新建公开的代码仓库,而且是国外的服务器,而Coding可以新建私有代码仓库,国内用户访问速度更快。注册Coding,添加项目,项目名称为Coding用户名
,分支选择master
,同时还需要在D:\hexo\blog\source
目录下创建一个空白文件Staticfile
:
cd /d/hexo/blog/source
touch Staticfile
添加SSH keys
https://coding.net/help/doc/git/ssh-key.html
在Coding 账户
中找到SSH 公钥
,新增公钥,复制公钥文件id_rsa.pub
中的内容
测试SSH连接
在Git Bash
中执行:
ssh -T git@git.coding.net
如果出现Hello username! You have connected to Coding.net by SSH successfully!
提示,则表示连接成功。
四、部署你的博客
注意站点配置文件D:\hexo\blog\_config.yml
中deploy
参数配置如下:
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
github: git@github.com:zrj766/zrj766.github.io.git,master
coding: git@git.coding.net:zrj766/zrj766.git,master
在本地Git中执行:
# git方式需要先安装插件
npm install hexo-deployer-git --save
# 上传代码到仓库
hexo clean && hexo generate && hexo deploy
或者:
hexo clean && hexo generate -d
如果出现INFO Deploy done: git
提示,则表示部署成功。访问用户名.github.io
和用户名.coding.me
都可以正常打开博客了。
五、独立域名绑定
用个二级域名总是不爽,何况现在主流域名都不贵,现在来绑定自己的域名。
1.DNS解析
www和@记录做CNAME解析到 用户名.github.io
如果使用的是Coding同样的方法解析到 pages.coding.me
2.Hexo上的设置
域名绑定Github
在D:\hexo\blog\source
目录下新建一个文件CNAME
,内容为要绑定的域名:
文件去掉格式,直接空白
www.example.com
example.com
域名绑定Coding Pages
在Coding网站中进入刚新建的项目,依次单击代码
、Pages服务
自定义域名:
重新部署一次代码即可。
六、其他辅助工具
Markdown书写工具
推荐Typora,介绍文章:http://www.iplaysoft.com/typora.html
Markdown渲染插件
图床
由于markdown要导入网络图片才能让本地用户和网络用户都能正常访问图片,而且像有道云笔记这种还不能支持插入图片,所以要借助图床和快捷插入图片的小插件来提高写作效率。
七牛
注册七牛,在对象存储
中新建存储空间,要选择公开空间,不然上传图片后无法分享外部链接。
MPic
下载MPic-图床神器,设置账号,空间名
为七牛对象存储空间名称,AccessKey
和SecretKey
在七牛个人面板
下的密钥管理
中,域名
为七牛对象存储空间中内容管理
页签下的外链默认域名。
七、扩展阅读
推荐一些文章可以帮助你更快的学习使用和解决问题
八、参考文章
本篇文章的写成参考了以下文章,感谢原作者的奉献!
九、总结
Hexo这种静态化博客真是轻快,打开速度飞快,比臃肿的WP强了很多。不过因为没有后台之类的东西所以新建文章等操作需要手动操作,不过Hexo的可塑性还是不错的,流行的MD语法,还有文件在本地都可以自由修改,只要懂得一些代码知识就能打造自己的站点。加上配合Github、Coding的使用,完全可以做到0成本拥有自己的博客。如果你对他感兴趣就一起来部署拥有自己的第一个博客吧!