前言
这是一篇很详细的独立博客搭建教程,意在帮助小白们能快速入门,拥有自己的独立博客。作者已在window平台已搭建成功,本博客就是用此方式。
为什么用Hexo搭建独立博客?
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
Github和Coding又是什么?
Github是国外免费的Git代码托管平台。利用Github Page服务可以免费创建一个静态网站。
Coding则是国内Git代码托管平台。国内首个Git代码托管平台GitCafe已被Coding收购。也提供page服务。
为什么用两个代码托管平台?
很多人都把hexo托管到github上,因为github大家都用的比较久了。但是,你的博客主要访问者肯定还是国内的用户,国内的用户访问coding比github是要快不少的。还可以利用域名解析实现国内的走coding,海外的走github,分流网站的访问。
步骤
安装Git
Git是什么?
Git是目前世界上最先进的分布式版本控制系统(没有之一)。
了解更多,参考git教程
- 点击下载,然后按默认选项安装即可。
- 安装完成后,在开始菜单里找到“Git”->“Git Bash”,蹦出一个类似命令行窗口的东西,就说明Git安装成功!
因为Git是分布式版本控制系统,所以,每个机器都必须自报家门:你的名字和Email地址。
注意git config命令的--global参数,用了这个参数,表示你这台机器上所有的Git仓库都会使用这个配置,当然也可以对某个仓库指定不同的用户名和Email地址。
安装Node.js
windows安装
- 直接进入官网 打开Downloads
- 再点击Windows Installer下载,默认安装就行
Linux安装
先去官网下载最新安装包
wget https://npm.taobao.org/mirrors/node/v10.16.2/node-v10.16.2-linux-x64.tar.xz
解压
tar -xvf node-v10.16.2-linux-x64.tar.xz
文件就被解压到当前文件夹下了
mv node-v10.16.2-linux-x64 /usr/local/node
- 配置环境变量
# 编辑 /etc/profile (使用vim)
vim /etc/profile #在底部添加 PATH 变量
export
PATH=$PATH:/usr/local/node/bin
# 保存退出,先按esc键,再按`shift`+`:wq`
# 最后保存并使其生效即可
source /etc/profile
安装Hexo
打开Git-bash,输入
npm install -g hexo-cli
即可完成Hexo的安装。
npm安装时候卡住看这里
安装插件(可选)
npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked --save
npm install hexo-renderer-stylus --save
npm install hexo-generator-feed --save
npm install hexo-generator-sitemap --save
本地部署Hexo
- 在电脑磁盘新建一个存放博客目录的文件夹,例如:blog
- 进入到blog文件夹,点空白处右击鼠标,打开Git-Bash右击
- 输入
hexo init
然后npm install
,该文件夹有如下目录,就安装成功!
├── _config.yml // 网站的配置信息,你可以在此配置大部分的参数。
├── package.json
├── scaffolds // 模板文件夹。当你新建文章时,Hexo会根据scaffold来建立文件。
├── source // 存放用户资源的地方
| ├── _drafts
| └── _posts
└── themes // 存放网站的主题。Hexo会根据主题来生成静态页面。
- 输入
hexo s
启动博客
$ hexo s
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
- 打开浏览器输入 http://localhost:4000/ 即可访问
将博客托管到Github和Coding上
托管到github
- 注册github帐号
访问官网注册,你的username和邮箱十分重要,GitHub上很多通知都是通过邮箱的。比如你的主页上传并构建成功会通过邮箱通知,更重要的是,如果构建失败的话也会在邮件中说明原因。 - 创建项目仓库
注册并登陆Github官网成功后,点击页面右上角的+,选择New repository。
在Repository name中填写Github账号名.github.io
点击Create repository,完成创建。
托管到coding
- 注册coding帐号
访问官网注册并登录 - 创建仓库
点+创建项目 - 填写项目名称描述创建即可,
配置SSH
配置ssh key是让本地git项目与远程的github建立联系
检查是否已经有SSH Key,打开Git Bash,输入
cd ~/.ssh11
- 如果没有.ssh这个目录,则生成一个新的SSH,输入
ssh-keygen -t rsa -C "your e-mail"
注意1: 此处的邮箱地址,你可以输入自己的邮箱地址;注意2: 此处的「-C」的是大写的「C」
- 接下来几步都直接按回车键,然后系统会要你输入密码
Enter passphrase (empty for no passphrase):<输入加密串>
Enter same passphrase again:<再次输入加密串>
这个密码会在你提交项目时使用,如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。
注意:输入密码的时候没有*字样的,你直接输入就可以了。
最后看到这样的界面,就成功设置ssh key了
添加 SSH Key 到 GitHub和Coding
- 打开Git Bash,然后输入
cd ~/.ssh11
- 进入到.shh文件夹中再输入ls,查看是否有id_rsa.pub文件
- 再鼠标全选中右击复制
再配置到GitHub和Coding的SSH中
进入Github官网,点击+旁边的头像,再按settings进入设置
在点击New SSH key创建
title输入邮箱,key里面粘贴刚才右击复制的内容,再点Add SSH key
同样进入coding,点击账户,在点SSH公钥设置即可测试SSH是否配置成功
- 打开Git Bash,然后输入
ssh -T git@github.com11
- 如配置了密码则要输入密码,输完按回车
如果显示以下内容,则说明Github中的ssh配置成功。
Hi username! You've successfully authenticated, but GitHub does notprovide shell access.
再输入
ssh -T git@git.coding.net
如果显示以下则说明coding中的ssh配置成功
Hello username You've connected to Coding.net by SSH successfully!
创建Github Pages和Coding Pages 服务
- GitHub Pages分两种,一种是你的GitHub用户名建立的username.github.io这样的用户&组织页(站),另一种是依附项目的pages。想建立个人博客是用的第一种,形如cnfeat.github.io这样的可访问的站,每个用户名下面只能建立一个。更多
- 官网点击代码再点击Coding Pages 服务开启。分支和github分支写一样,填写master
将博客网站上传到GitHub和Coding中
打开D:\blog文件夹中的
_config.yml
文件,找到如下位置,填写# Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: github: git@github.com:yourname/yourname.github.io.git,master coding: git@git.coding.net:yourname/yourname.git,master
注: (1) 其中yourname替换成你的Github账户名;(2)注意在yml文件中,:后面都是要带空格的。
再更改一下_config.yml文件,其中的url和root属性。
url: root: /blog\ root 下面应该设置成 /你的项目名 而不是/ 然后重新部署一下。
- 在blog文件夹中空白处右击打开Git Bash输入
hexo g #生成静态网页
npm install hexo-deployer-git --save hexo d #开始部署
此时,通过访问http://yourname.github.io和http://yourname.coding.me可以看到默认的Hexo首页面(与之前本地测试时一样)。
### 更换Hexo主题
我使用的是Next主题。该主题简洁易用,在移动端也表现不错。
- 下载主题
在blog文件夹中空白处右击打开Git Bash输入
git clone https://github.com/xirong/hexo-theme-next.git themes/next
或者建议使用使用国内的仓库
git clone https://git.coding.net/tianyu211/next.git themes/next
修改网站的主题为Next
打开D:\blog下的_config.yml
文件,找到theme字段,将其修改为next
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next
- 验证主题是否可用
输入
hexo s #启动服务,调试用
再在浏览器输入http://localhost:4000/确认网站主题是否切换为Next.
- 博客blog根目录下的_config.yml配置网站信息
_config.yml配置请点参考
Hexo博客nexT主题优化
阅读全文按钮
编辑主题配置_config.yml
auto_excerpt:
enable: false
length: 150(可自行设置)
把 enable 设置为true之后,每篇文章都会在第150个字符处截断
搜索界面
执行代码
npm install hexo-generator-search --save
然后编辑hexo的_config.yml
search:
path: search.xml
field: post
相册界面
执行hexo new page “photos”
,然后在hexo/source文件夹下能够找到photos文件夹,进入文件夹,编辑index.md文件,添加字段:
type: photos
然后编辑主题配置_config.yml
,在menu选项中添加photos项:
menu:
home: /
categories: /categories
about: /about
#archives: /archives
tags: /tags
#commonweal: /404.html
photos: /photos
进入hexo/themes/next/languanges文件夹,编辑zh-Hans.yml文件,在menu菜单里添加photos对应的中文名称,修改如下:
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
commonweal: 公益404
photos: 相册
然后为相册页在菜单下的链接添加图标,在Fontawesome中找到自己喜欢的图标,记录名称,在编辑主题配置config.yml
,在menu_icons
字段中增加一行photos:
:
menu_icons:
enable: true
#KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
home: home
about: user
categories: th
tags: tags
archives: archive
commonweal: heartbeat
photos: photo
然后在hexo/source/photos/index.md
中,增加代码:
{% raw %}
<style>
.photo img{
border: 1px solid #999;
height:180px;
width: 180px;
}
.photo li{
margin: 10px;
float: left;
list-style: none;
}
</style>
<div class="photo">
{% endraw %}
* 
* 
{% raw %}
</div>
{% endraw %}
把其中的URL
换成要展示的图片的地址,本地或者外链都可以。
重新编译,生成。
文章添加阅读次数
关于Hexo的文章阅读量设置问题,大多数人都是使用不蒜子的代码实现。但是这个方法仅局限于在文章页面显示阅读数,首页是不显示的。所以我推荐使用leanCloud管理阅读量数据。
在Hexo 5.0版本以后,已经自带可以直接开启文章阅读量
统计:
- 进入leanCloud官网注册个账号,可以不用手机号,只用邮箱激活,然后点击头像进入控制台
- 创建一个应用,命名为
Counter
- 点击应用右上角的齿轮,进入应用设置界面,点击
存储
创建一个Class命名为Counter
,设置权限为无限制
- 创建完毕后点击应用的
设置
,找到应用Key
,复制下来App ID
和App Key
打开
next根目录
下的_config.yml
配置文件找到leancloud_visitors
字段,把你上一步的AppID和AppKey粘贴过来,看起来大概像这样:leancloud_visitors: enable: true app_id: 40LJ62BsvIsNX0gRT8Lf0cuR-gzGzoHsz app_key: SJ7F5qRaBjcYv8yHhex3pHcv
- 重新编译部署
hexo clean
、hexo g -d
添加Fork me on Github
去网址https://github.com/blog/273-github-ribbons 挑选自己喜欢的样式,并复制代码,添加到themes\next\layout_layout.swig
的body
标签之内即可
记得把里面的url换成自己的!
底部powered by的版权修改
用Next主题搭建起来的博客,在底部会有这样的Powered by版权声明
修改方法
- 首先,找到
\themes\next\layout\_partials\
下面的footer.swig
文件,打开:
图中每个框都是一个模块,随便你想修改还是删除,都可以
- 除了这里,还有
\themes\next\languages\
这个文件夹中,根据你的语言选择对应文件,我是中文zh-Hans.yml
,可以看到如下图:
上文中的footer.theme
等等就是调用这里的值,要修改或者删除,就看你心情了
修改后的样式
绑定自己的域名
域名解析
如果你选择的是万网注册的域名,可以使用其自带的域名解析服务。
也可以选择免费的DNSPod
- 打开
blog文件夹
下的source
文件夹,新建CNAME文件
不需要后缀,内容填写自己的域名
CNAME文件设置的目的是,通过访问 yourname.github.io 可以跳转到你所注册的域名上。
coding是直接在项目主页设置的,打开就可以看到。
设置好之后去dns服务提供商那里添加CNAME
解析。
END
去访问你的博客吧
啊,哈哈哈