Hexo搭建免费独立博客，托管到Github和Coding上
登录
标签搜索
侧边栏壁纸
博主昵称
Guooo

  • 累计撰写 126 篇文章
  • 累计收到 81 条评论
Linux 归档

Hexo搭建免费独立博客，托管到Github和Coding上

Guooo
Guooo
2017-04-21 / 1 评论 / 1,102 阅读 / 正在检测是否收录...

前言

这是一篇很详细的独立博客搭建教程，意在帮助小白们能快速入门，拥有自己的独立博客。作者已在window平台已搭建成功，本博客就是用此方式。

为什么用Hexo搭建独立博客？

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

Github和Coding又是什么？

Github是国外免费的Git代码托管平台。利用Github Page服务可以免费创建一个静态网站。

Coding则是国内Git代码托管平台。国内首个Git代码托管平台GitCafe已被Coding收购。也提供page服务。

enter description here
为什么用两个代码托管平台？

很多人都把hexo托管到github上，因为github大家都用的比较久了。但是，你的博客主要访问者肯定还是国内的用户，国内的用户访问coding比github是要快不少的。还可以利用域名解析实现国内的走coding，海外的走github，分流网站的访问。

步骤

安装Git

Git是什么？
Git是目前世界上最先进的分布式版本控制系统（没有之一）。
了解更多，参考git教程
  • 点击下载，然后按默认选项安装即可。
    enter description here
  • 安装完成后，在开始菜单里找到“Git”->“Git Bash”，蹦出一个类似命令行窗口的东西，就说明Git安装成功！

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

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

安装Node.js

windows安装

  • 直接进入官网 打开Downloads

enter description here

  • 再点击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右击

enter description here

  • 输入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.

将博客托管到Github和Coding上

托管到github

  • 注册github帐号
    访问官网注册,你的username和邮箱十分重要，GitHub上很多通知都是通过邮箱的。比如你的主页上传并构建成功会通过邮箱通知，更重要的是，如果构建失败的话也会在邮件中说明原因。
  • 创建项目仓库
    注册并登陆Github官网成功后，点击页面右上角的+，选择New repository。
    enter description here
    在Repository name中填写Github账号名.github.io
    enter description here
    点击Create repository，完成创建。

托管到coding

  • 注册coding帐号
    访问官网注册并登录
  • 创建仓库
    点+创建项目
  • 填写项目名称描述创建即可,
  • enter description here

配置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了

enter description here

添加 SSH Key 到 GitHub和Coding

  • 打开Git Bash，然后输入
cd ~/.ssh11
  • 进入到.shh文件夹中再输入ls，查看是否有id_rsa.pub文件

enter description here

  • 再鼠标全选中右击复制

  • 再配置到GitHub和Coding的SSH中
    进入Github官网，点击+旁边的头像，再按settings进入设置
    enter description here
    在点击New SSH key创建
    enter description here
    title输入邮箱，key里面粘贴刚才右击复制的内容,再点Add SSH key
    enter description here
    同样进入coding,点击账户，在点SSH公钥设置即可
    enter description here

    测试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

enter description here

将博客网站上传到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文件中，:后面都是要带空格的。
    enter description here

  • 再更改一下_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 %}
* ![](URL)
* ![](URL)
{% raw %}
</div>
{% endraw %}

把其中的URL换成要展示的图片的地址，本地或者外链都可以。
重新编译，生成。

文章添加阅读次数

关于Hexo的文章阅读量设置问题，大多数人都是使用不蒜子的代码实现。但是这个方法仅局限于在文章页面显示阅读数，首页是不显示的。所以我推荐使用leanCloud管理阅读量数据。
在Hexo 5.0版本以后，已经自带可以直接开启文章阅读量统计：

  1. 进入leanCloud官网注册个账号，可以不用手机号，只用邮箱激活，然后点击头像进入控制台
  2. 创建一个应用，命名为Counter
  3. 点击应用右上角的齿轮，进入应用设置界面，点击存储创建一个Class命名为Counter，设置权限为无限制
    enter description here
  4. 创建完毕后点击应用的设置，找到应用Key，复制下来App ID和App Key
    enter description here

  5. 打开next根目录下的_config.yml配置文件找到leancloud_visitors字段，把你上一步的AppID和AppKey粘贴过来，看起来大概像这样：

    leancloud_visitors:
  enable: true
  app_id: 40LJ62BsvIsNX0gRT8Lf0cuR-gzGzoHsz
  app_key: SJ7F5qRaBjcYv8yHhex3pHcv
  6. 重新编译部署hexo clean、hexo g -d

添加Fork me on Github

enter description here

去网址https://github.com/blog/273-github-ribbons 挑选自己喜欢的样式，并复制代码，添加到themes\next\layout_layout.swig的body标签之内即可
记得把里面的url换成自己的!

底部powered by的版权修改

用Next主题搭建起来的博客，在底部会有这样的Powered by版权声明

enter description here

修改方法

  • 首先，找到 \themes\next\layout\_partials\下面的footer.swig文件，打开：
    enter description here

图中每个框都是一个模块，随便你想修改还是删除，都可以

  • 除了这里，还有\themes\next\languages\这个文件夹中，根据你的语言选择对应文件，我是中文zh-Hans.yml，可以看到如下图：
    enter description here

上文中的footer.theme等等就是调用这里的值，要修改或者删除，就看你心情了

修改后的样式
enter description here

绑定自己的域名

域名解析

如果你选择的是万网注册的域名，可以使用其自带的域名解析服务。
也可以选择免费的DNSPod
enter description here

  • 打开blog文件夹下的source文件夹，新建CNAME文件不需要后缀,内容填写自己的域名
    CNAME文件设置的目的是，通过访问 yourname.github.io 可以跳转到你所注册的域名上。
    coding是直接在项目主页设置的，打开就可以看到。
    设置好之后去dns服务提供商那里添加CNAME解析。

END

去访问你的博客吧
0
暂无标签
版权属于： Guooo
本文链接： http://icufree.com/linux/Hexo-build.html
作品采用： 《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权

评论 (1)

取消
  1. 头像
    嗯
    Windows 10 · Google Chrome

    啊，哈哈哈

    回复