搜索
您的当前位置：首页正文

基于Hexo+github+coding搭建个人博客——基础篇(

来源：二三娱乐

前言

  • Hexo博客搭建的基础大致流程为：
    安装Node.js →安装Git → 安装Hexo → 安装主题 → 本地测试运行 → 注册给github与coding并创建pages仓库 → 部署

  • 这是博主的系统环境与版本:
    OS: Ubuntu16.04
    Node.js: 6.2.0
    Npm: 3.8.9
    Hexo: 3.2.2
    主题NexT: 5.1.0
    Git: 2.7.4

  • 对于使用windows的童鞋，可参考文章末尾处的参考链接，步骤大同小异

  • 以下提到的站点配置文件指的是博客文件根目录下的 _config.yml，主题配置文件是主题文件夹下的 _config.yml，童鞋们不要混淆了

安装Node.js

方法一：二进制包直接解压配置

sudo ln -s /home/ybd/Data/soft/application/node-v6.2.0-linux-x64/bin/node /usr/local/bin/node

sudo ln -s /home/ybd/Data/soft/application/node-v6.2.0-linux-x64/bin/npm /usr/local/bin/npm

注意！源文件要写<font color=red>绝对路径</font>，否则会报错：链接层数过多。也可以直接将node可执行文件拷贝到 /usr/local/bin 目录下。

接下来就可以查看是否成功配置了

node -v
npm -v

方法二：换源下载

安装 6.x 版本：

curl -sL  | sudo -E bash -
sudo apt-get install -y nodejs

安装 8.x 版本：

curl -sL  | sudo -E bash -
sudo apt-get install -y nodejs

npm 更换淘宝镜像：

npm config set registry https://registry.npm.taobao.org/

方法三：源文件编译安装

在安装前，首先需要配置安g++编译器

sudo apt-get install build-essential

./configure
make
sudo make install

执行以下命令，检测是否已经装好node.js

node -v

npm安装，一条命令即可解决

curl http://npmjs.org/install.sh | sudo sh

博主安装Node.js遇到的问题就是多次安装了不同版本的Node.js，有的是安装在用户变量上，有的是系统变量，所以每次用的时候都要切换到root用户，就算赋权 sudo chmod 777 file 都没有用，所以折腾了很久才把Node.js完全卸载，再重新安装

安装Git

Ubuntu系统下安装Git非常简单，只需一条命令：

sudo apt-get install git

然后终端执行 git --version 查看是否安装成功

安装Hexo

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

  • 所有以上必备的应用程序安装完成后，无论是在哪个操作系统，之后的操作都一样

安装Hexo的非常简单，只要一条命令，前提是安装好Node.js与Git

npm install -g hexo-cli
  • 如果npm安装hexo失败，则很有可能是<font color=red>权限</font>问题，或者npm与node的版本不兼容（很少出现）

如果顺利安装完成，理论上Hexo已经安装完成，但在Ubuntu系统中，比较坑的地方就是 hexo 命令居然放在了Node.js安装目录的 bin 文件夹下，不能快捷地在终端把命令敲出来，所以还是老规矩，软链接走起

sudo ln -s /home/ybd/data/application/node-v7.4.0-linux-x64/bin/hexo /usr/local/bin/hexo

到此，Hexo的安装已基本完成，可以先试一下Hello World。

解决Hexo命令fs.SyncWriteStream问题

nodejs版本更新到8.0之后，运行hexo相关命令总会出现这么一行鬼东西：
(node:538) [DEP0061] DeprecationWarning: fs.SyncWriteStream is deprecated.
虽然不怎么影响大局，当对于强迫症来说是一个噩梦！

npm install hexo-fs --save

当然还有一些插件：

npm install hexo-deployer-git@0.3.1 --save
npm install hexo-renderer-ejs@0.3.1 --save
npm install hexo-server@0.2.2 --save

But，问题木有得到解决啊！
hexo命令有个-debug参数，运行命令的时候加上这个参数，可以定位问题：

ybd@15ffab36a16c:~/blog$ hexo clean --debug
03:01:16.464 DEBUG Hexo version: 3.3.9
03:01:16.467 DEBUG Working directory: ~/blog/
03:01:16.539 DEBUG Config loaded: ~/blog/_config.yml
03:01:16.613 DEBUG Plugin loaded: hexo-admin-qiniu
(node:538) [DEP0061] DeprecationWarning: fs.SyncWriteStream is deprecated.
03:01:16.655 DEBUG Plugin loaded: hexo-algolia
03:01:16.657 DEBUG Plugin loaded: hexo-baidu-url-submit
03:01:16.668 DEBUG Plugin loaded: hexo-deployer-git
03:01:16.672 DEBUG Plugin loaded: hexo-fs
03:01:16.674 DEBUG Plugin loaded: hexo-generator-archive
03:01:16.677 DEBUG Plugin loaded: hexo-generator-baidu-sitemap
03:01:16.678 DEBUG Plugin loaded: hexo-generator-category
03:01:16.680 DEBUG Plugin loaded: hexo-generator-feed
03:01:16.681 DEBUG Plugin loaded: hexo-generator-index
03:01:16.682 DEBUG Plugin loaded: hexo-generator-tag
03:01:16.826 DEBUG Plugin loaded: hexo-inject
03:01:16.828 DEBUG Plugin loaded: hexo-renderer-ejs
03:01:16.829 DEBUG Plugin loaded: hexo-generator-sitemap
03:01:16.834 DEBUG Plugin loaded: hexo-renderer-marked
03:01:16.836 DEBUG Plugin loaded: hexo-renderer-stylus
03:01:16.881 DEBUG Plugin loaded: hexo-server
03:01:16.912 DEBUG Plugin loaded: hexo-wordcount
03:01:16.943 DEBUG Plugin loaded: hexo-reference
03:01:16.946 DEBUG Script loaded: themes/next/scripts/merge-configs.js
03:01:16.947 DEBUG Script loaded: themes/next/scripts/tags/button.js
03:01:16.947 DEBUG Script loaded: themes/next/scripts/tags/center-quote.js
03:01:16.947 DEBUG Script loaded: themes/next/scripts/tags/full-image.js
03:01:16.947 DEBUG Script loaded: themes/next/scripts/tags/note.js
03:01:16.948 DEBUG Script loaded: themes/next/scripts/tags/group-pictures.js
03:01:16.949 DEBUG [hexo-inject] firing inject_ready
03:01:16.951 INFO  Deleted database.
03:01:16.956 DEBUG Database saved

发现问题在hexo-admin-qiniu这个插件=.=

貌似也没怎么用这个插件，那么就删掉吧：

nmp uninstall hexo-admin-qiniu --save

那个报错终于消失啦～～～

本地启动Hello World与Hexo简单使用

初始化

随便建一个文件夹，名字随便取，博主取其名为blog，cd 到文件夹里，先安装必要的文件，执行以下命令：

hexo init  # hexo会在目标文件夹建立网站所需要的所有文件
npm install  # 安装依赖包

本地启动

有了必要的各种配置文件之后就可以在本地预览效果了

hexo g # 等同于hexo generate，生成静态文件
hexo s # 等同于hexo server，在本地服务器运行

之后打开浏览器并输入IP地址 http://localhost:4000/ 查看，效果如下

新建文章与页面

hexo new "title"  # 生成新文章：\source\_posts\title.md
hexo new page "title"  # 生成新的页面，后面可在主题配置文件中配置页面
  • 生成文章或页面的模板放在博客文件夹根目录下的 scaffolds/ 文件夹里面，文章对应的是 post.md ，页面对应的是page.md，草稿的是draft.md

编辑文章

打开新建的文章\source\_posts\postName.md，其中postName是hexo new "title"中的title

title: Start My Blog Trip — Power By Hexo  # 文章页面上的显示名称，可以任意修改，不会出现在URL中
date: 2017-01-10 23:49:28  # 文章生成时间，一般不改
categories: diary  # 文章分类目录，多个分类使用[a,b,c]这种格式
tags: [Hexo,diary]  # 文章标签
---

#这里开始使用markdown格式输入你的正文。

<!--more--> 
#more标签以下的内容要点击“阅读全文”才能看见

插入图片

插入图片有三种方式

方式一

在博客根目录的 source 文件夹下新建一个 img 文件夹专门存放图片，在博文中引用的图片路径为 /img/图片名.后缀

![](图片路径)

方式二

对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说，Hexo也提供了更组织化的方式来管理资源，将站点配置文件中的 post_asset_folder 选项设为 true 来打开文章资源文件夹

post_asset_folder: true

然后再博文中通过相对路径引用

{% asset_img 图片文件名 %}

方式三

上传完成之后点击关闭回到管理页面，选中刚上传的图片，最右边的操作点击复制链接即可



然后在博文中通过地址引用

简单的命令

总结一下简单的使用命令

hexo init [folder] # 初始化一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站
hexo new [layout] <title> # 新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来
hexo version # 查看版本
hexo clean # 清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo g # 等于hexo generate # 生成静态文件
hexo s # 等于hexo server # 本地预览
hexo d # 等于hexo deploy # 部署，可与hexo g合并为 hexo d -g

安装主题（以NexT为例）

复制主题

Hexo 安装主题的方式非常简单，只需要将主题文件拷贝至站点目录的 themes 目录下， 然后修改下配置文件即可
在这我们使用git克隆最新版

cd your-hexo-site
git clone  themes/next

启用主题

打开站点配置文件， 找到 theme 字段，并将其值更改为 next

theme: next

然后 hexo s 即可预览主题效果

更换主题外观

NexT有三个外观，博主用的是 Muse，直接更改主题配置文件的 scheme 参数即可，如果显示的是繁体中文，那么站点配置文件中的 language: zh-CN

scheme: Muse
#scheme: Mist
#scheme: Pisces

注册Github和Coding并分别创建Pages

那为什么要注册两个网站呢？因为Github是国外的服务器，访问速度比较慢，而Coding是国内的，速度相对来说比较快，在后面DNS解析的时候可以把国内的解析到Coding，国外的解析到Github，完美

GitHub

注册Github帐号

创建Repository(Github Pages)


创建时，只需要填写Repository name即可，可以顺便创建README文件，就是红色那个钩，当然这个名字的格式必须为{user_name}.github.io，其中{user_name}<font color=red>必须</font>与你的用户名一样，这是github pages的特殊命名规范，如下图请忽视红色警告，那是因为博主已经有了一个pages项目

Coding

注册Coding帐号

创建项目(Coding Pages)


查看Pages 服务是否开启：点击项目 -> 代码 -> Pages 服务，若没有开启则点开启

配置SSH与Git

那么我们有了两个免费的服务器之后，就要绑定个人电脑与它们联系，那就是SSH与Git
绑定之后我们每次部署项目就不用输入帐号和密码

生成SSH Key

ssh-keygen -t rsa -C

添加SSH Key

首先是Github，登录Github，右上角 头像 -> Settings —> SSH nd GPG keys —> New SSH key 。把公钥粘贴到key中，填好title并点击 Add SSH key

至于Coding，登录进入主页，点击 账户 —> SSH公钥 —> 输入key再点击 添加

验证成功与否

验证github

ssh -T

如果是第一次的会提示是否continue，输入<font color=red>yes</font>就会看到：You’ve successfully authenticated, but GitHub does not provide shell access 。这就表示已成功连上github!之前博主就是因为没有输入yes，导致几次失败，粗心地一路回车= =
验证coding

ssh -T

同上，按yes
接下来我们要做的就是把本地仓库传到github上去，在此之前还需要设置username和email，因为github每次commit都会记录他们

git config --global user.name your name
git config --global user.email

部署到Github与Coding

在此之前，先安装Git部署插件

npm install hexo-deployer-git --save

打开站点配置文件，拉到底部，修改部署配置：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:
    github: 
    coding:

注意冒号后面是网站对应的用户名，接着就是/，然后再是你的项目名加上 .git,master
保存后终端执行

hexo clean
hexo g
hexo d

稍等片刻，可能会由于环境、网络等原因，部署的时间会有偏差，有的人快有的慢


部署完成后可在浏览器输入 yourName.github.io 或者 yourName.coding.me 都可以浏览到一个属于自己的博客了 ～

总结

最后用拙劣的语言总结一下博主搭建Hexo博客的体会，六个字：简洁但，不简单。
再六个字，正如NexT官方说的：精于心，简于形
= =貌似这个博客也不怎么简洁，有点花俏，装X嫌疑
但无论怎样，折腾这个博客让我受益匪浅，正如之前听到的一句名言，忘了谁说的：不努力试一把，又怎么会知道绝望...好像很有道理，绝望中寻找光芒，绝处逢生...嘿嘿嘿

参考

Copyright © 2019- yule263.com 版权所有
湘ICP备2023023988号-1

Top