如何搭建个人博客 ?Hexo + GitHub 是一个不错的选择

Hexo + Github 搭建的个人博客: http://woyaodafu.com/

什么是 Hexo ?

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

什么是 GitHub ?

GitHub 是通过 Git 进行版本控制的软件源代码托管服务,由 GitHub 公司(曾称 Logical Awesome)的开发者 Chris Wanstrath、PJ Hyett 和 Tom Preston-Werner 使用 Ruby on Rails 编写而成。(维基百科)

准备工作

检查电脑是否安装了 Git ?在 Dos 窗口下,输入以下命令并执行 :

git --version

检查电脑是否安装了 Node.js ? 在 Dos 窗口下,输入以下命令并执行 :

node -v

注 :
1、Windows + R -> cmd -> 进入 Dos 窗口
2、已经安装过该软件,会显示对应的安装软件版本,没有安装会提示 "xx" 不是内部命令或外部命令。

安装 Node.js

下载 Node.js

安装 Git

下载 Git

Git 安装成功后,点击鼠标右键会发发现多了个两个选项,如图 :

image

安装 Hexo

$ npm install hexo-cli -g 
$ hexo init blog
$ cd blog
$ npm install
$ hexo server

点击鼠标右键,点击 Git Bash Here,然后依次输入并执行上面的代码。第一步是安装 hexo 扩展插件。

第二步是创建一个为 blog 的文件夹,把 hexo 相应的代码下载到该文件中下。此时目录情况如下 :

image
node_modules  npm 文件缓存目录
scaffolds     文夹件下存放的是文章、页面模版
scource       文夹件下存放的是我们的资源文件
themes        文件下存放的是我们的主题文件
.gitignore    git 忽略文件,设置提交文件时,哪些文件不提交
_config.yml   站点配置文件
package.json  站点版本,站点依赖文件
yarn.lock     yarn.lock 文件由 Yarn 自动创建,并且完全通过 Yarn 进行操作。

第三步是进入 blog 文件夹,第四步是安装 hexo 相关的代码。

第五步是启动本地服务,启动完成后,如图 :

image

在浏览器输入 http://localhost:4000/ 就可以访问刚刚创建的博客了。如下图 :

image

现在本地我们已经可以访问了,我要其他人也能访问我的博客怎么办呢 ?下面我们就要用到 GitHub 来解决这个问题,还不知道 GitHub 的同学,得抓紧了解一下。

注 : 当我们需要关闭本地服务的时候,可以在通过在 Git Bash 窗口输入 Ctrl + C 关闭服务。

hexo 常用命令 :

$ hexo generate (hexo g) 生成静态文件
$ hexo server (hexo s) 启动本地服务
$ hexo deploy (hexo d) 提交到远程仓库
$ hexo new page "xx"(hexo n page) 创建页面 
$ hexo new "xx" (hexo n "") 创建文章
$ hexo d -g 生成静态并提交到远程仓库
$ hexo s -g 生成静态文件并启动本地预览
$ hexo clean 清除本地 public 文件

创建 GitHub 账号并添加一个远程仓库

GitHub

GitHub 注册 :

image

注册成功后,登录账号,点击右侧 "+" 号,然后点击 New repository 添加仓库,如图 :

image

完成上述操作后,点击 Create repository 创建仓库。

仓库创建成功后,如图 :

image

这里有两个地址,一个是 Https,一个是 SSH 。Https 每次提交都需要输入用户名和密码,SSH 只要添加了 SSH key 值,以后提交不需要输入用户名和密码。

注 : 这里创建的仓库名称必须为 username.github.io,username 替换成你的 github 用户名,每个账户有且只有一个仓库用来存放网页静态文件,这里名称是固定的。当创建其他仓库的时候,仓库名称可以自定义。

GitHub 添加 SSH key

检查本地是否有 SSH key

$ cd ~/.ssh
$ ls

第一步是进入 .ssh 文件夹,第二步是显示 .ssh 文件下的文件夹及文件。如果 SSH key 存在,就会显示 id_rsa、id_rsa.pub、know_hosts 三个文件 。

image

没有也没关系,下面我们就来创建 SSH key

$ ssh-keygen -t rsa -C "你的邮箱"

把 "你的邮箱" 替换成你真实的邮箱,然后点击回车。接着会让你输入文件名,点击回车直接忽略,接着会让输入两次密码,点击两次回车,直接设置为空,不用输入密码 。

创建成功后,可以通过如下命令拷贝 SSH key 的内容 :

$ clip < ~/.ssh/id_rsa.pub"

现在已拷贝了 SSH key 的内容,那么 GitHub 如何添加 SSH key 呢 ?点击右上角头像,然后点击Settings 。如图 :

image

然后点击 New SSH key,如图 :

image

把之前拷贝的内容粘贴到 key 里面,然后点击 Add SSH key,如图 :

image

怎么去验证是否已经添加成功了呢 ?通过如下命令 :

$ ssh -T git@github.com

验证成功,如图 :

image

现在这样就成了 ?还差一步,现在我们需要去设置 hexo 配置文件 _config.yml。

修改主题及网站相关设置

修改站点配置文件(_config.yml)

注 :
对应的目录 :blog/_config.yml/,blog 为 hexo init 初始化文件夹的名称,替换成你自己初始化文件夹的名称。

修改 depoly :

deploy:
  type: git 
  repo: git@github.com:username.github.io.git
  branch: master
image

注 :如上图所示,找到 GitHub 上对应的远程仓库地址,点击右侧复制按钮,把 "git@github.com:username.github.io.git" 替换成刚刚复制的远程仓库地址。

修改 site 相关信息 :

title: xx
subtitle:     
description:
keywords:
author: xx
language: zh-Hans
timezone:

注 :网站名称(title),作者 (author),语言 (language)

不喜欢现在的主题,想要换一个主题 ? 我怎么知道有哪些主题呢 ?下面我们就去寻找自己喜欢的主题。

修改网站主题

在 GitHub 首页搜索 hexo theme,通过右边的过滤条件来筛选搜索的结果。如图 :

image

我是按照 star 数进行筛选的,就以 hexo-theme-next 为例,点击 hexo-theme-next,进入项目里面查看 README.md 文件。

image

通过 git 方式下载项目,命令如下 :

$ cd themes
$ git clone https://github.com/iissnan/hexo-theme-next next

第一部步是进入到 themes 下面, 第二步是拷贝远程主题到该目录下。下载完成后,我的博客 themes 下就多了一个 next 文件夹。如图 :

image

修改 theme :

theme : next

注 :把默认主题 landscape 切换成 next。

修改主题配置文件(_config.yml)

注 :
对应的目录 :blog/themes/next/_config.yml/,blog 为 hexo init 初始化文件夹的名称,替换成你自己初始化文件夹的名称。

修改 menu :

menu:
  home: / || home
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  about: /about/ || user
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

默认 menu 菜单显示 home、archives,根据自己的需要去掉注释。

修改 Schemes :

scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

next 主题对应的有四个风格,Muse、Mist、Pisces、Gemini,默认为 Muse。

编辑主题配置文件,启用自动摘录 :

auto_excerpt:
  enable: true
  length: 150

注 :修改 auto_excerpt 为 true,允许自动摘录,显示部分,点击阅读全文。

创建标签云页面

创建分类页面

创建 "关于我" 页面

添加搜索功能

LocalSearch搜索

安装 hexo-generator-searchdb,命令如下 :

$ npm install hexo-generator-searchdb --save

编辑主题配置文件,启用本地搜索功能 :

# Local search
local_search:
  enable: true

注 :设置 local_search 为 true。

添加网站访问量统计功能

我使用的是 不蒜子 统计

image

在主题 footer.swig 底部添加如下内容 :

 <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
   <span id="busuanzi_container_site_pv">本站总访问量<spanid="busuanzi_value_site_pv"></span>次</span>

统计显示风格也可以自定义,我的统计显示风格代码如下 :

<div class="busuanzi-count">
  <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="site-uv">
      <i class="fa fa-user"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
    </span>
  
    <span class="site-pv">
      <i class="fa fa-eye"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
    </span>
    </div>
image

注 : 在主题 footer.swig 底部添加上述代码。

到此,也快接近尾声了,再坚持一下,把这段路走完。

生成静态文件

$ hexo g

提交到远程仓库

$ hexo d

这下心想终于快弄完了,结果还给我搞个错。在提交的时候出现了如下错误 :ERROR Deployer not fount: git

image

这里需要先安装一个扩展插件 :

$ npm install hexo-deployer-git --save

安装完成后,执行 hexo d,执行完成后,就可以在 github 上看见我们提交的静态文件了,也可以通过 http://username.github.io 访问我们的博客了,username 改成你的github 用户名。

更多

Hexo

hexo-theme-next Wiki

参考链接

手把手教你使用Hexo + Github Pages搭建个人独立博客

github设置添加SSH

Hexo博客添加搜索功能

想要搭建属于自己的博客,就 「立刻」、「马上」行动 。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,454评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,553评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,921评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,648评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,770评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,950评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,090评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,817评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,275评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,592评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,724评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,409评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,052评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,815评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,043评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,503评论 2 361
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,627评论 2 350

推荐阅读更多精彩内容