写在前面
为什么网上这么多教程,我还要在这里写下一篇呢?主要是总结大家的经验和自己的操作过程,一来是方便自己看,二来是给大家提供一些参考。Google一下,你可以找到几乎所有你想看到的,但是能否为你带来实质性的解决方案,可能也是需要花时间的。而且,跟别人做一样的操作,可能就刚好是你出了问题。。。没错,说的就是我自己。写这篇文章,仅此以纪念从WordPress转到Hexo。
博客搭建
适合哪些人呢?
- 平常喜欢写作,尤其是Blog的人。有不少人通过Hexo发表文学类作品呢。
- 不害怕编程,且爱折腾的人
- 了解和能够使用版本控制Git和GitHub的人
- 熟悉基本的MarkDown语法,能够利用MarkDown和Typora写作的人
准备工作
安装环境
- Node.js下载,并安装到您的计算机上。
- Git下载,并安装到您的计算机上。
不会下载安装?没关系,点击链接去它们的官网,有非常详细的安装教程。或者,我也可以抽时间写,但是感觉这样的文章质量并不高啊!
安装Hexo
这时候我们需要利用npm来安装了。(直接打开Git Bash,或者任意位置鼠标右键选择打开)
运行如下命令:
如果报错,出现
npm ERR! registry error parsing json
的话,可能需要设置npm代理,执行如下命令
npm config set registry http://registry.cnpmjs.org
然后删除刚才安装的npm目录,
重新执行第一条命令安装Hexo,不过,这第一步都能报错,脸是有多黑啊!!!
初始化Hexo
在命令行接着运行以下命令
$ hexo init <folder> //创建\初始化hexo文件夹
$ cd <folder>
$ npm install //安装依赖包
这里的是你自己指定的文件夹,比如说我的就是这样:
$ hexo init G:hexo
$ cd G:hexo
$ npm install
这样说你应该更容易理解,这就相当于选择安装软件的位置。
本地查看
新建完成后,指定文件夹的目录如下:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
在命令行执行如下命令,然后打开你的浏览器输入http://localhost:4000/即可查看。
hexo generate
hexo server
到这一步,你的本地博客基本上就搭建起来了。我第一次搭建成功时,简直是兴奋的飞起了!
注意事项详解
- hexo相关命令均在站点目录下,用Git Bash运行。
- _config.yml是站点的配置文件,用来存放网站的配置信息,可以在此配置大部分的参数。路径为:
- 也就是你的站点的根目录下。
- 还有个叫_config.yml的,是你的主题配置文件,千万别弄混了。路径为:
<folder>\themes\<主题文件夹>\_config.yml
就存放在你的主题根目录下
- scaffolds是模板文件夹。当你新建文章的时候,Hexo 会根据 scaffold 来建立文件。
- source是资源文件夹,是存放用户资源的地方。
- themes,没错,就是存放主题的文件夹,今后你可能要无数次的打开它。
网站搭建实施方案
GithubPages
- 创建一个GitHub账号,如果你有一个更好。
- 创建一个仓库,名字必须为:<Github账号名称>.github.io
- 图中报错的细节就不要在意了,这个仓库只能创建一个,当时我创建的时候没有截图。为了方便理解,专门去打开了这个页面截了一张图。
- 将本地Hexo博客推送到GithubPages
3.1.安装hexo-deployer-git插件。在命令行(即Git Bash)运行以下命令即可:
$ npm install hexo-deployer-git --save3.2.添加SSH Key
3.2.1.创建一个SSH Key。在命令行输入一下命令,密码为空,敲击三下回车:
$ ssh-keygen -t rsa -C "邮箱地址"3.2.2.把公钥添加到GitHub。复制密钥文件内容,路径形如:
C:\Users\Administrator(也就是你的账户名)\.ssh\id_rsa.pub
- 然后粘贴到SSH keys即可。
3.2.3.测试是否添加成功。在命令行输入以下命令:
$ ssh -T git@github.com $ yes返回“You’re successfully authenticated”,就说明你添加成功啦!
3.3.修改你的站点配置文件_config.yml(前面说过了在你的站点目录下)。文件末尾修改为:
# Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: git@github.com:<Github账号名称>/<Github账号名称>.github.io.git branch: master仓库地址填写ssh地址,比如我的:
deploy: - type: git repo: git@github.com:kingdragonyjl/kingdragonyjl.github.io.git barnch: master3.4.然后我们要推送到GitHubPages。在命令行(即Git Bash),输入以下命令,注意,这个命令请记下来。以后你会经常用到的。
$ hexo g $ hexo d如果返回:
INFO Deploy done: git即推送成功啦!然后稍等片刻,浏览器访问地址:
https://<Github账号名称>.github.io然后,嗯嗯~ o( ̄▽ ̄)o,到这里就成功了啦,是不是很开心?
GithubPages + 域名
这一步最重要的就是买域名了,买个域名先!
- 打开你的域名提供商的控制台,设置域名解析。
1.1.解析类型选择为CNAME;
1.2.主机记录,就是你的域名前缀,填写www即可;
1.3.记录值去复制你的<Github账号名称>.github.io填上去;
1.4.线路解析,就默认的就行了。
- 仓库设置
2.1.打开你的博客仓库设置,都到这一步了别告诉我你不知道在哪儿。
然后再该页面中往下滑,找到图中的位置!
- 我相信你看到页面上的提示,能够非常容易地添加自定义域名并开启 https 的!
GithubPages + CodingPages + 域名
你还可以在CodingPages上也搭建仓库,推送到仓库的时候2个仓库是同步推送的呢!
- 创建你的Coding账号
- 一样要创建一个用来托管的仓库,而且仓库名为:<Coding账号名称>
- 将你的Hexo博客给推送到CodingPages
3.1.之前大家在创建GitHubPages时,我们是已经做过生成公钥这一步了。这时候找到它,复制内容,并粘贴到Coding的新增公钥。
3.2.然后我们来测试以下成功了没有。在命令行依次输入如下命令:
$ ssh -T git@git.coding.net $ yes返回了“You’ve successfully authenticated”,就表示已经成功了!
3.3.修改你的站点配置文件_config.yml(前面说过了在你的站点目录下)。文件末尾修改为:
type: git repo: git@git.dev.tencent.com:<Coding账号名称>/<Coding账号名称>.git branch: master按照之前的GitHub添加一样,在这里把coding的也添加上去,直接加到后面即可!
4.4.然后推送到你的Coding仓库,没错,又是这两条指令:
$ hexo g $ hexo d
- 进入刚才创建的Coding项目,进入代码页面,你会看到有一项叫Pages服务,然后点击“一键开启静态Pages”。稍等片刻,美味就快好。。。不对,稍等片刻CodingPages即可部署成功!
- 域名解析
5.1.解析类型选择为CNAME;
5.2.主机记录,就是你的域名前缀,填写www即可;
5.3.记录值去复制你的<Coding账号名称>.coding.me填上去;
5.4.线路解析,就默认的就行了。
- 在你刚才开启Pages服务的地方,点击设置,进入它的设置页绑定你的自定义域名。
- 最后,到这里基本上就大功告成啦!~ o( ̄▽ ̄)o
配置解析注意事项
嗯,为什么要在两个托管平台都搭建起来呢?原因很简单:要实现国内外访问不同的服务,所以要分别托管并且分别设置解析。无论是腾讯云还是阿里云,他们的解析服务都能够很好地区分国内外的节点。我们需要将国内的CNAME设置到pages.coding.me,将国外的CNAME设置到pages.github.io,然后,魔法就出现了!
Hexo命令行常用指令
hexo help #查看帮助
hexo init #初始化一个目录
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成网页,可以在 public 目录查看整个网站的文件
hexo server #本地预览,'Ctrl+C'关闭
hexo deploy #部署.deploy目录
hexo clean #清除缓存,**你可以选择每次执行命令前先清理缓存,每次部署前先删除 .deploy 文件夹**
简写:
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
部署成功时会返回这个:
最后
记得平时多做好备份,这是个好习惯。万一出现文件误删,丢失等,甚至GitHub你在某一天无法访问。
我的博客的评论系统是Valine我觉得还可以吧,其它的如:来比利、哦不是来必力、畅言等都是不错的。由于我只用了一个,优缺点就不说了,但是感觉Valine的UI更符合我的胃口。
博客右下角的被大家称为萌萌哒,也就是二次元看板娘,是使用live-2d实现的。
如果你的Hexo搭建成功,不妨跟大家分享以下你的快乐呢!
*版权声明:版权归作者本人所有,尊重原创,推送文章除非无法确认,都会注明作者和来源。如果出处有误或侵犯到原作者权益,实属无心之举,请务必与我联系删除或授权事宜。本公众号所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!