设置
  • 日夜间
    随系统
    浅色
    深色
  • 主题色

IT之家学院:使用Hexo搭建独立博客并托管到Github和Coding上

2017/6/2 17:49:40 来源:IT之家 作者:郭小铭 责编:文轩
感谢IT之家网友 Yuuuuu 的线索投递!

感谢IT之家网友 郭小铭 的投稿

前言

这是一篇很详细的独立博客搭建教程,意在帮助之家dalao们能快速入门,拥有自己的独立博客。

为什么用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 Bash”,蹦出一个类似命令行窗口的东西,就说明Git安装成功!

因为Git是分布式版本控制系统,所以,每个机器都必须自报家门:你的名字和Email地址。

注意git config命令的–global参数,用了这个参数,表示你这台机器上所有的Git仓库都会使用这个配置,当然也可以对某个仓库指定不同的用户名和Email地址。

安装Node.js

Windows安装

直接进入Node.js官网打开Downloads选项卡,

再点击Windows Installer下载,默认安装就行。

Linux安装

先去官网下载最新安装包

wget https://nodejs.org/dist/v6.10.3/node-v6.10.3-linux-x64.tar.xz

使用解压命令

xz -d node-v6.10.3-linux-x64.tar.xz

tar -xvf node-v6.10.3-linux-x64.tar

或者

tar -xvJf node-v6.10.3-linux-x64.tar.xz

文件就被解压到当前文件夹下了

mv node-v6.10.3-linux-x64 node-v6.10.3

mv node-v6.10.3 /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 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 athttp://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.gitthemes/next

或者建议使用使用国内的仓库

git clone https://git.coding.net/tianyu211/next.gitthemes/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 %}

{% endraw %}

* ![](URL)

* ![](URL)

{% raw %}

{% 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是直接在项目主页设置的,Github是在里面加CNAME文件。然后去dns服务提供商哪里添加CNAME。

搭建完成的博客示例

博客地址GTianYu' blog

广告声明:文内含有的对外跳转链接(包括不限于超链接、二维码、口令等形式),用于传递更多信息,节省甄选时间,结果仅供参考,IT之家所有文章均包含本声明。

软媒旗下网站: IT之家 最会买 - 返利返现优惠券 iPhone之家 Win7之家 Win10之家 Win11之家

软媒旗下软件: 软媒手机APP应用 魔方 最会买 要知