安装git
安装成功后将你的Git与GitHub帐号绑定
1 | git config --global user.name "你的GitHub用户名" |
生成ssh密钥文件
1 | ssh-keygen -t rsa -C "你的GitHub注册邮箱" |
然后直接三个回车即可,默认不需要设置密码
1 | // 获取公钥 |
打开gitHub右上角 => Settings => SHH and GPG keys,新建new SSH Key,将id_rsa.pub密钥内容全部复制
安装node(推荐nvm安装node),Hexo基于Node.js
创建仓库
github上新建一个名为你的用户名.github.io的仓库,比如你的github用户名是test,那么你就新建test.github.io的仓库网站访问地址就是 http://test.github.io
安装Hexo
新建一个名为hexo的文件夹(名字可以随便取),例如:Desktop\Blog,这个文件夹作为你存放代码的地方,所以最好不要随便放。
使用npm命令安装Hexo,并初始化
1 | cd Desktop/Blog |
hexo会自动下载一些文件到这个目录
1 | //hexo init 可能会报错,如下 |
执行以上命令之后,hexo就会在public文件夹生成相关html文件,这些文件将来都是要提交到github去的:
hexo s是开启本地预览服务,打开浏览器访问 http://localhost:4000 即可看到内容,很多人会碰到浏览器一直在转圈但是就是加载不出来的问题,一般情况下是因为端口占用的缘故,因为4000这个端口太常见了,解决端口冲突问题请参考这篇文章:端口冲突
第一次初始化的时候hexo已经帮我们写了一篇名为 Hello World 的文章,默认的主题比较丑
1 | hexo命令简写 |
推送网站
上面只是在本地预览,接下来要做的就是就是推送网站,也就是发布网站,让我们的网站可以被更多的人访问。在设置之前,需要解释一个概念:
1)、在blog根目录里的_config.yml文件称为`站点配置文件`
2)、根目录里的themes文件夹,里面也有个_config.yml文件,这个称为`主题配置文件`
下一步将我们的Hexo与GitHub关联起来,打开站点的配置文件
_config.yml,翻到最后修改为:
1 | deploy: |
最后安装Git部署插件
1 | npm install hexo-deployer-git --save |
然后执行上面说的命令就可以推送网站了
1 | hexo clean // 清除缓存 |
打开浏览器,在地址栏输入你的放置个人网站的仓库路径,即 xxxx.github.io就可以访问了
绑定域名
不绑定域名肯定也是可以的,用默认的 xxx.github.io 来访问,
如果想拥有自己的域名,要注册一个,阿里的1元购,其实也不是1元,就是一年十几到几十块钱不等。
建议:如果你买到了喜欢的域名,请尽可能买的长一点。否则到续费的时候你可能追悔莫及,而且如果你需要备案更换域名也会很麻烦(这里github不用备案)
域名绑定与解析
1)在你购买后打开域名控制台 => 点开解析添加如下两条记录
主机记录 | 记录类型 | 解析请求来源 | 记录值 | TTL |
---|---|---|---|---|
www | CNAME | 默认 | xxxx.github.io | 10分钟 |
@ | A | 默认 | 185.199.1xx.1xx | 10分钟 |
CNAME
记录的记录值设置成域名,也就是你的github主页xxxx.github.io
A
记录的记录值设置为IP地址,通过ping xxxx.github.io
获得
2)然后在你Blog文件的根目录的source文件夹下新建一个CNAME文件(不要有任何后缀),在里面写入自己的域名(假如你买的域名是zhangsan.xyz
,CNAME文件里就写zhangsan.xyz
)
3)最后在你Github找到仓库xxxx.github.io
,点击Settings => pages =>往下拉找到 Custom domain => 填入你的域名保存
4)大功告成,现在你就可以通过你的域名访问你的网站了
另外说一句,在你绑定了新域名之后,原来的你的xxxx.github.io
并没有失效,而是会自动跳转到你的新域名
更换主题
如果你不喜欢Hexo默认的主题,可以去官网更换不同的主题
在hexo目录下的themes文件夹下,下载
1 | git clone https://github.com/iissnan/hexo-theme-next //复制主题的网址 |
配置_config.yml文件
打开hexo目录下的站点的配置文件
_config.yml,修改主题theme : 下载的主题名。注意冒号之后的空格
说明
默认情况下,生成的博文目录会显示全部的文章内容,如何设置文章摘要的长度呢?
1 | 在合适的位置加上<!--more-->即可 |