• Github:只是建立了一个github.io的库,没有账号的话可以注册一个。
  • Hexo:下载了它的安装包和主题,关于它部署博客的命令不用刻意记住,因为文档里都有,知道常用的命令就可以。
  • GithubPages:GitHub Pages是用来托管 GitHub 上静态网页的免费站点。只要你建立了github.io库,就默认在使用,它相当于一个服务器,可以保存你的所有博客文件。

利用Hexo和GithubPages搭建博客,实际上就是利用Hexo在本地(你的电脑上)生成一个博客站点,然后将它传输到Github/Coding上进行拷贝和备份。再由Github和Coding提供的GithubPages服务将博客部署到网上,这样你的博客就可以作为一个独立的站点被别人浏览(正式上线)。同时你也可以在Github上管理你的博客。

start

搭建步骤

1.获得个人网站域名,GitHub创建个人仓库
2.安装Git,安装Node.js,安装Hexo, Hexo常用命令
3.推送网站
4.绑定域名
5.更换主题
6.目录的创建
7.创作与发布文章(简单了解MarkDown语法)
8.寻找图床
9.个性化设置
10.推送到百度

1.获得个人网站域名,GitHub创建个人仓库

a.个人网站域名(去腾讯或阿里购买)
b.GitHub创建个人仓库
个人仓库 命名方式
创建一个repo,名称为yourname.github.io, 其中yourname是你的github名称,按照这个规则创建才能直接使用https://yourname.github.io;
之后这个Setting中:

Setting
设置:Source设置为master,Custom domain设置为’你的域名’。
更多: 我的GitHub

2.安装Git,安装Node.js,安装Hexo,常用命令

a.什么是Hexo?

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
Github地址,Hexo文档

优点:
  • 极速生成静态页面
  • 一键部署博客
  • 丰富的插件支持
  • 支持 Markdown
b.安装Hexo前提:
  • Node.js
  • Git

安装Node与Git之后,将Git与GitHub帐号绑定:
在你blog的文件目录下点击鼠标右键,之后点击Git Bash,设置user.name和user.email配置信息

1
2
$ git config --global user.name "你的GitHub用户名"
$ git config --global user.email "你的GitHub注册邮箱"

生成ssh密钥文件:

1
ssh-keygen -t rsa -C "你的GitHub注册邮箱"

将生成的密钥文件添加到GitHub中:
SSH

在gitbash中验证是否添加成功:

1
$ ssh -T git@github.com

c.环境搭建好,可以安装Hexo了
1
$ npm install -g hexo-cli
d.测试网站

在当前blog根目录下按顺序输入以下三条命令

1
2
3
$ hexo n my-test
$ hexo g
$ hexo s

这些命令在后面作介绍,完成后,打开浏览器输入地址:localhost:4000
刚刚的三个命令依次是新建一篇博客文章生成网页、在本地预览的操作。

e.常用命令
命令 作用
npm install hexo -g 安装Hexo
npm update hexo -g 升级Hexo
hexo new page menuName 新建名为menuName的目录
hexo n (hexo new) 新建文章
hexo g (hexo generate) 生成
hexo s (hexo server) 启动服务预览
hexo d(hexo deploy) 远程部署

hexo server #Hexo会监视文件变动并自动更新,无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存,若是网页正常情况下可以忽略这条命令

3.推送网站

接下来要做的就是就是推送网站,也就是发布网站,让我们的网站可以被更多的人访问。在设置之前,需要解释一个概念,在blog根目录里的_config.yml文件称为站点配置文件,如下图:
根目录
进入根目录里的themes文件夹,里面也有个_config.yml文件,这个称为主题配置文件:
主题配置文件
下一步将我们的Hexo与GitHub关联起来,打开站点的配置文件_config.yml,翻到最后修改为:
deploy:
type: git
repo: 这里填入你之前在GitHub上创建仓库的完整路径,记得加上 .git
branch: master
参考如下:
根目录下_config.yml
保存站点配置文件。
其实就是给hexo d 这个命令做相应的配置,让hexo知道你要把blog部署在哪个位置,很显然,我们部署在我们GitHub的仓库里。最后安装Git部署插件,输入命令:

1
npm install hexo-deployer-git --save

这时,我们分别输入三条命令(建议每次都按照如下步骤部署):

1
2
3
hexo clean
hexo g
hexo d

其实第三条的 hexo d 就是部署网站命令,d是deploy的缩写。完成后,打开浏览器,在地址栏输入你的放置个人网站的仓库路径,
即 http://.github.io (为你的GitHub仓库名),就可以看到网站内容了

4.绑定域名

使用我们自己的个性化域名,这就需要绑定我们自己的域名。

第一步:对域名进行解析(我的是腾讯云服务器):
域名绑定
cmd中ping一下就能看到(ping 你的仓库名字.github.io)
包括添加三条解析记录,185.199.108.153是我的GitHub的地址,
可以ping 你的github用户名.github.io ,然后把得到的ip地址填入进去。第三个记录类型是CNAME,CNAME的记录值是:你的github用户名.github.io 这里千万别弄错了。
解析地址

第二步,登录GitHub,进入之前创建的仓库,点击settings,设置Custom domain,输入你的域名
Custom domain

点击save保存。
第三步,进入本地博客文件夹 ,进入/source目录下,创建一个记事本文件,输入你的域名带有www:,对,只要写进你自己的域名即可。如果带有www,那么以后访问的时候必须带有www完整的域名才可以访问,但如果不带有www,以后访问的时候带不带www都可以访问。所以建议,不要
CNAME
保存,命名为CNAME ,注意保存成所有文件而不是txt文件。
完成这三步,进入blog目录中,右键打开git命令行,依次输入:

1
2
3
hexo clean
hexo g
hexo d

这时候打开浏览器在地址栏输入你的个性化域名将会直接进入你自己搭建的网站。

5.更换主题

Hexo初始化之后默认的主题是landscape,在themes文件夹里存放主题,如果不喜欢默认主题可以选择其他主题,例如我要改成black-blue主题,在github中搜索你要的主题名称,里面都会有该主题的如何使用的介绍,按着来就好了。在blog文件夹根目录下克隆你想要的主题
这是将black-blue主题下载到blog目录的themes主题下的black-blue文件夹中。打开站点的_config.yml配置文件,修改主题为black-blue:
在themes\black-blue中,打开主题的_config.yml配置文件,不是站点主题文件可以更改配置。

安装常用插件:
rss插件
1
npm install hexo-generator-feed --save
站点sitemap生成插件
1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
本地搜索插件集成
1
npm install hexo-generator-search --save

全局配置,修改根目录下_config.yml

插件配置:
Plugins:
  • hexo-generator-feed
  • hexo-generator-sitemap
  • hexo-generator-baidu-sitemap
    rss设置:
    feed:
    type: atom
    path: atom.xml
    limit: 20
    本地搜索配置:
    search:
    path: search.json
    field: post
    站点地图,SEO搜索引擎需要:
    sitemap:
    path: sitemap.xml
    baidusitemap:
    path: baidusitemap.xml
    如果出现把标题改为中文后乱码的情况,把编码改成unicodeutf8选项即可
    主题配置,修改themes目录下_config.yml
    比如修改背景图片,修改头像,修改一些页面上的链接,具体可以根据自己需要修改。

6.目录的创建

目录配置在主题的配置文件里:
创建目录
在根目录里:
$ hexo new page about
在根目录的source里就增加一个about文件夹,进入about文件夹,编辑index.md,重新部署,点击目录关于我就可以看到about页面了。

7.创作与发布文章

创建新的文章:

1
hexo n "你的文章名字"

新建的blog在\blog\source_posts里 ,然后编辑文章(使用markdown语法),然后发布文章

1
2
3
hexo clean
hexo g
hexo d

8.寻找图床

图床,当博文中有图片时,若是少量图片,可以直接把图片存放在source文件夹中,但这显然不合理的,
因为图片会占据大量的存储的空间,加载的时候相对缓慢 ,这时考虑把博文里的图片上传到某一网站,
然后获得外部链接,使用Markdown语法,图片信息 完成图片的插入,这种网站就被成为图床。
国内,一般是新浪云和七牛网。我使用的是阿里OSS。把需要的图片上传,然后复制URL就可以使用了。

9.个性化设置

网易云音乐
点击生成外链播放器,得到html文件。
在想加入地方直接引用,我是在在blog\themes\black-blue\layout_partial\left-col.ejs中加了网易云音乐的外部引用:

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=30352891&auto=1&height=66"></iframe>

10.推送到百度

参考

#####主动推送:
安装hexo-baidu-url-submit插件

1
$ npm install hexo-baidu-url-submit --save

同样在根目录下,把以下内容配置到_config.yml文件中:
配置

我的百度资源平台: https://ziyuan.baidu.com/https/index

#####自动推送:
一般在目录blog\themes\主题文件\layout_partial\head.ejs中加入JS,这样全站都有了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>

参考:
https://www.jianshu.com/p/0a86c719a489
https://zhuanlan.zhihu.com/p/26625249?utm_source=qq
https://www.cnblogs.com/visugar/p/6821777.html
https://geeksblog.cc/hexo-theme.html

end

× 打赏我吧
打赏二维码