hexo+github搭建我的博客教程和各類坑記錄

記錄使用github pages服務搭建我的博客的詳細過程以及遇到的各類坑

hexo+github搭建我的博客教程

1.前言

1.1 準備工做

環境 ： win10

• 註冊github帳號：https://github.com/

• 下載安裝node.js:官網下載https://nodejs.org/en/

  下載後圖形化界面安裝，安裝成功後運行cmd 輸入node -v，顯示版本信息即爲成功

  下載npm：因爲新版的nodejs已經集成了npm，因此以前npm也一併安裝好了。一樣能夠經過輸入 "npm -v" 來測試是否成功安裝

• 下載git,配置好用戶名密碼郵箱

  2.搭建博客

  2.1github建立倉庫

  在github網頁新建一個倉庫並命名爲你的用戶名.github.io的倉庫，注意：

  • 驗證註冊的郵箱

  • 倉庫名必須爲用戶名.github.io

  • 倉庫建立後須要等待一會

    2.2 配置ssh-key

    首先打開git bush ,執行

    $ cd ~/. ssh #檢查本機已存在的ssh密鑰

    若是提示：No such file or directory 說明你是第一次使用git ：

    ssh-keygen -t rsa -C "郵件地址"

    而後連續3次回車，最終會生成一個文件在用戶目錄下，打開用戶目錄，找到.ssh\id_rsa.pub文件，記事本打開並複製裏面的內容，打開你的github主頁，進入setting -> SSH and GPG keys -> New SSH key：

  打開命令行或者git bash，輸入

  $ ssh -T git@github.com # 注意郵箱地址不用改

  若是提示Are you sure you want to continue connecting (yes/no)?，輸入yes，而後會看到： Hi xxx ...!

如圖，即爲配置成功，而後輸入

$ git config --global user.name "liuxianan"// 你的github用戶名，非暱稱
$ git config --global user.email  "xxx@qq.com"// 填寫你的github註冊郵箱

3.配置hexo

3.1 hexo

Hexo是一個簡單、快速、強大的基於 Github Pages 的博客發佈工具，支持Markdown格式，有衆多優秀插件和主題。

官網： http://hexo.io
github: https://github.com/hexojs/hexo

• 推薦徹底在git bash 執行命令

• hexo不一樣版本差異較大，注意區分

• hexo有兩種_config.yml文件 ，一個是根目錄下的全局的_config.yml，一個是各個theme下的

  3.2hexo安裝

  $ npm install -g hexo

  新建hexo文件夾，這個文件夾將做爲你存放代碼的地方

  切到hexo文件夾打開命令行，運行

  $ hexo init

hexo會自動下載一些文件到這個目錄，包括node_modules：

$ hexo g # 生成
$ hexo s # 啓動服務

執行以上命令以後，hexo就會在public文件夾生成相關html文件，這些文件未來都是要提交到github去

hexo s是開啓本地預覽服務，打開瀏覽器訪問 http://localhost:4000 便可看到內容

若是端口占用，運行如下：

1. 按下Win+R調出命令行窗口，輸入netstat -aon|findstr "4000"，找到指定行最後一列的數字（PID）
2. 輸入tasklist|findstr "PID"，發現是xxx用了4000端口。
3. 再次輸入taskkill /f /t /im xxx.exe結束該進程。

第一次初始化的時候hexo已經幫咱們寫了一篇名爲 Hello World 的文章，默認的主題比較醜

3.3修改主題

以主題 https://github.com/esappear/hexo-theme-clover 爲例：

可在 https://hexo.io/themes/ 查找更多主題

推薦主題 http://theme-next.iissnan.com/getting-started.html

在博客根目錄:

$ git clone https://github.com/blleng/hexo-theme-lx themes/lx

更改站點設置文件_config.yml:

theme: lx

而後從新執行hexo g來從新生成。 若是出現一些莫名其妙的問題例如樣式崩了，能夠先執行hexo clean來清理一下public的內容，而後再來從新生成和發佈

3.4 上傳到github

在上傳代碼到github以前，必定要記得先把你之前全部代碼下載下來（雖然github有版本管理，但備份一下老是好的），由於從hexo提交代碼時會把你之前的全部代碼都刪掉。

配置好ssh-key後，配置hexo文件夾中的_config.yml:

deploy :
  type: git
  repository: git@github.com:lishoushoua/lishoushoua.git
  branch: master

• 注意！deploy後要有一個空格，不然hexo d會報錯

  此時直接執行hexo d的話通常會報以下錯誤：

Deployer not found: github 或者 Deployer not found: git

安裝一個插件：

npm install hexo-deployer-git --save

• 注意！要在git bash 中運行命令， 不然會提示Permission denied (publickey)

打開你的git bash，輸入hexo d就會將本次有改動的代碼所有提交，沒有改動的不會：

刷新github page頁面,便可顯示

3.5經常使用hexo命令

hexo new "postName" #新建文章
hexo new page "pageName" #新建頁面
hexo generate #生成靜態頁面至public目錄
hexo server #開啓預覽訪問端口（默認端口4000，'ctrl + c'關閉server）
hexo deploy #部署到GitHub
hexo help  # 查看幫助
hexo version  #查看Hexo的版本

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

hexo s -g #生成並本地預覽
hexo d -g #生成並上傳

3.6_config.yml

在Hexo中有兩個很重要的名爲_config.yml的文件，其中一個在站點安裝的根目錄下，另外一個在主題目錄下。前者提供了Hexo自身的一些基本配置信息，後者爲你所安裝的主題的相關配置。爲了方便區分，咱們把前者稱爲站點配置文件，後者稱爲主題配置文件。

站點配置文件

文件路徑站點根目錄/_config.yml
這裏貼一下我的的部分配置，能夠改一下相關內容自行體會一下效果：

# Site
title: cuteerha
subtitle: Live well,love lots,and laugh often
description: 我的學習記錄
keywords:
author: cuteerha
language: en
timezone: Changchun

「title」：博客的名稱。
「subtitle」：根據主題的不一樣，有的會顯示有的不會顯示。
「description」：主要用於SEO，告訴搜索引擎一個關於站點的簡單描述，一般建議在其中包含網站的關鍵詞。
「author」：做者名稱，用於主題顯示文章的做者。
「language」：語言會對應的解析正在應用的主題中的languages文件夾下的不一樣語言文件。因此這裏的名稱要和languages文件夾下的語言文件名稱一致。
「timezone」：可不填寫。

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'

url: https://lishoushoua.github.io/lishoushoua.github.io/
root: /lishoushoua.github.io/
permalink: :title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing index.html from permalinks

「url」：通常填寫本身的站點連接。
「root」：設置根目錄的位置。若是你的網站存放在子目錄中，例如 http://yoursite.com/blog，則應該將你的 url 設爲http://yoursite.com/blog 並把 root 設爲 /blog/。
「permalink」：生成的連接的格式。帶井號的是默認的格式，帶有日期感受怪怪的，改爲了本身喜歡的格式。規則也比較簡單，標籤前面要加英文冒號。
「permalink_defaults」: 生成連接中各部分的默認值

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

書寫相關的設置
「new_post_name」：新的博文的文件名
「default_layout:「 默認佈局
「filename_case: 0「 #把文件名稱轉換爲 (1) 小寫或 (2) 大寫
「render_drafts: false「 是否顯示草稿
「post_asset_folder: false「 #是否啓動資源文件夾
「relative_link: false「 #把連接改成與根目錄的相對位址
「future: true 「
「highlight:「 #代碼塊的設置，Hexo自帶的代碼高亮插件

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

分類和標籤的設置
「default_category」：若是撰寫文章時沒有設置分類，默認的分類選擇。
「category_map」：用於映射分類的別名。
「tag_map」：用法和分類別名是同樣的。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy :
  type: git
  repository: git@github.com:lishoushoua/lishoushoua.git
  branch: master

「theme」：主題拓展，能夠在主題商店選擇其餘主題，這裏使用next
「deploy」：部署方式

4.遇到的問題

4.1關於hexo安裝失敗的解決方法

可能國內npm源有問題，鍵入一下代碼便可成功安裝

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install hexo-cli -g

4.2出現*'git'* 不是內部或外部命令，也不是可運行的程序

Windows下配置Git,配置環境變量path

• 找到git安裝路徑中bin的位置，如：D:\Program Files\Git\bin
• 找到git安裝路徑中git-core的位置，如：D:\Program Files\Git\libexec\git-core;
• 右鍵「計算機」->「屬性」->「高級系統設置」->「環境變量」->在下方的「系統變量」中找到「path」->選中「path」並選擇「編輯」->將找到的bin和git-core路徑複製到其中->保存並退出
• 注：「path」中，每一個路徑之間要以英文輸入狀態下的分號——「;」做爲間隔

4.3 npm ERR! Error: EPERM: operation not permitted

權限問題，使用管理員權限打開命令行，也能夠對hexo所在文件夾修改相應的用戶權限

4.4 git push沒有權限

Permission denied (publickey).fatal: Could not read from remote repository.

1. 先看本地是否有ssh文件

   > cd ~/.ssh

2. 有則把公鑰加到github,參見前文配置密鑰

3. 執行 ssh -T git@github.com 出現以下提示，本地公鑰沒有問題

   > ssh -T git@github.com
   Hi lishoushoua! You've successfully authenticated, but GitHub does not provide shell access.

4.5nothing to commit, working tree clean

hexo進行提交博客，使用hexo d命令，但須要是使用 hexo-deployer-git 包的，若是沒有安裝，它檢索不到博文，進而提交時，讓github發現項目沒有發生變化，因而提交失敗，彈出這種提示。

安裝 hexo-deployer-git

npm install hexo-deployer-git

4.6 github page沒有樣式

url地址沒有配置正確，修改_config.yml文件的url地址和根目錄

url: https://lishoushoua.github.io/lishoushoua.github.io/
root: /lishoushoua.github.io/

有多是hexo緩存的問題，也就是網站根目錄的db.json出了問題，建議清除下緩存 清除緩存的方法： 執行命令：hexo clean 而後生成靜態博客，在本地預覽:

$hexo clean
$hexo g
$hexo d

4.7 github更換next主題後404

排除主題和 CNAME 問題，出現 404 ，首先判斷是缺乏 index.html ，因此確定就是靜態頁面文件不全，能夠查看.deploy_git 目錄下是否有 index.html，運行如下命令解決：

npm install hexo-generator-index --save