使用 Hexo + Github 搭建自己的博客

Hexo 是一個快速、簡潔且高效的靜態(tài)博客應用,它的一大亮點是提供了強大的 CLI 工具,真正實現(xiàn)了一鍵部署。Hexo 使用 Markdown 來解析文章,可以在很短時間內渲染出簡潔大方的頁面。本文將從安裝到部署來詳細介紹 Hexo。

本文涉及到的一些工具需要一定操作基礎,若有疑問,請先自行搜索學習。

安裝

Hexo 的運行和部署需要以下工具:

  • Node.js
  • Git

安裝 Node.js

Windows 平臺使用官網(wǎng)提供的安裝包來安裝,在 cmd 中驗證是否安裝好:


安裝 Hexo-Cli

安裝 Node 時一般默認安裝了 npm 工具,因此使用以下命令來安裝 Hexo 的命令行工具 Hexo-Cli:

$ npm install -g hexo-cli

安裝 Git

Windows 平臺下安裝 git-for-windows,*nix 平臺使用自帶的包管理工具安裝,以 Ubuntu 為例:

$ apt-get install git

創(chuàng)建一個站點

在任意位置打開 cmd,使用 hexo init <dir> 命令創(chuàng)建一個博客,dir 為博客目錄名

$ hexo init <folder>
$ cd <folder>
$ npm install

等待所有依賴包安裝完成

配置

配置站點

博客根目錄的 _config.yml 為 “站點配置文件”,包括 SEO、主題、布局、插件等配置項

# Site
title: xxx的博客
subtitle: 副標題
description: 對站點的描述
keywords: 關鍵詞
author: 作者
language: 語言(中文簡體為:zh-Hans)
timezone: 時區(qū)(國內這里填寫:Asia/Shanghai)

Hexo 默認的樣式大概是這樣的:


推薦使用 Next 主題

主題

安裝 Next 主題

在站點根目錄打開 cmd,運行命令:

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

切換主題

主題相關的文件就從 Next 的 github 倉庫克隆到了 themes/next 目錄下,只需要在 “站點配置文件” 中將 theme 字段的值改為 next 就實現(xiàn)了主題的切換

theme: next

查看效果

Hexo 提供的命令行工具中自帶服務器功能,在站點根目錄運行:

$ hexo s

當出現(xiàn)提示:

INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

的時候,就可以打開瀏覽器訪問:http://localhost:4000 來查看效果了,默認效果是這樣的:

如果覺得不好看可以通過修改themes/next目錄下 “主題配置文件” _config.yml來自定義主題樣式,這里只介紹一些常用配置,詳細配置請參考 Next 官網(wǎng)

布局

Next 的默認布局為 Muse,就是這個樣子:


Next 還提供另外兩種布局:

  • Pisces
  • Mist

我這里使用的是 Pisces,所有這樣修改 “主題” 配置文件:

scheme: Pisces

Pisces 布局的效果:


寫文章

在站點根目錄運行命令:

hexo new [title]

其中,[title] 為文章題目,運行命令后在 source/_posts 目錄下可以看到 文章題目.md 這樣一個文件,用任意編輯器打開這個文件,里面的內容大概是這樣:

---
title: Hello World
date: 2013/7/13 20:46:25
---

這段內容在 Hexo 官方的叫法為 Front matter,在渲染文章的時候,渲染引擎會讀取這段內容并在頁面適當?shù)牡胤秸故疚恼碌母鞣N信息,Front matter 主要有一下幾項:

  • title:文章標題
  • date:創(chuàng)建日期
  • tags:標簽
  • categories:分類

需要注意的是,分類是具有層次性的,也就是說 Python,爬蟲 這種分類和 爬蟲,Python 是完全不同的,它們會被分為兩類,而標簽則沒有這種層次性

如果覺得使用起來不是很方便,可以只給定一個分類,比如這樣:

categories:
- 日記
tags:
- 上海
- 旅行

站點首頁會以分頁的方式展示最近發(fā)布的文章,默認展示全文,如果想要只展示開頭部分內容,比如這種效果:


可以在文章適當?shù)奈恢锰砑?`` 標記,這樣可以在首頁只展示標記之前的內容,避免首頁一次加載過多內容造成不好的體驗

部署

如果有可用的服務器,可以使用 hexo g 命令,生成靜態(tài)站點,通過 FTP 或其他方式將站點上傳到服務器對應目錄,并配合 nginx 或 Apache 服務器,即可完成部署,這里介紹一下沒有服務器情況下,如何搭建一個完整的博客站點

首先要有一個 github 賬號,如果沒有,可到 github 用郵箱注冊

新建一個倉庫,倉庫的名字必須符合 <用戶名>.github.io,用戶名指的是瀏覽 github 個人主頁的時候,瀏覽器地址欄 github.com/ 后面的那個名字,比如我的 github 主頁,則我的用戶名就是 jameszbl,新建倉庫后會跳轉到初始化頁面,顯示一個類似于 https://github.com/jameszbl/jameszbl.github.io.git 的 url, 記下這個url,稍候會用到

在 “站點配置文件” 中,找到 deploy,如果沒有可以手動添加,像這樣填寫:

deploy:
    - type: git
      # 遠端倉庫地址(剛才記下的 url)
      repo: https://github.com/JamesZBL/jameszbl.github.io.git
      branch: master

這里的部署配置需要安裝一個插件,因此在站點根目錄運行命令:

$ npm install hexo-deployer-git --save

插件安裝完成后,再執(zhí)行:

$ hexo g && hexo d

部署插件會自動將編譯完成的靜態(tài)站點推送到 github 的遠端倉庫,等待幾分鐘后,訪問 <github 用戶名>.github.io,即可看到搭建好的效果了

我的博客

歡迎訪問:鄭保樂的博客

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 第一章 安裝Git工具 下載GitHub for Windows,直接點擊安裝,安裝完成后,可以看到“Git Sh...
    不圓的石頭閱讀 12,141評論 5 63
  • 明明1個小時就可以建好的博客,這次上手操作卻花了3天。每天都會遇奇葩的bug,慶幸自己能將它們一一擊破。 我不懂代...
    simonlu1211閱讀 490評論 0 0
  • 版權聲明:本文為博主原創(chuàng)文章,未經(jīng)博主允許不得轉載。 閑聊 在大三的時候,一直就想搭建屬于自己的一個博客,但由于各...
    Kerry202閱讀 1,997評論 0 2
  • 你說你喜歡童話 漫天飛舞的雪花 一定有受難的白雪公主 為了逃過老巫婆的詛咒 在雪中的森林里躲藏 你說也一定會有七個...
    亞民閱讀 328評論 2 3
  • 當真正的春天到來的時候,立春再次成為村大院的一道亮麗的風景,再次令桂家村的百姓驚艷。 經(jīng)過半年挺著大肚子的孕婦形象...
    冬妮婭閱讀 383評論 0 0

友情鏈接更多精彩內容