Hexo+GitHub搭建個人博客網(wǎng)站

前言

今天颁独，帶大家利用Hexo和GitHub搭建屬于自己的個人博客。

配一張圖

Hexo

Hexo 是一個快速店诗、簡潔且高效的博客框架炉抒。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內(nèi)世舰，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁动雹。

HEXO

傳送門：Hexo官網(wǎng)中文文檔

環(huán)境配置

1. 安裝&配置git

訪問git官網(wǎng)，下載git跟压。
雙擊exe文件安裝胰蝠，一路next即可。
安裝好git之后震蒋，配置用戶名和郵箱茸塞。打開git-bash：

# 配置全局用戶名
git config --global user.name "yourname"
# 配置全局郵箱
git config --global user.email "youremail@qq.com"

用戶名和郵箱同你的GitHub（如果沒有，去GitHub官網(wǎng)注冊一個查剖，注冊好后記得郵箱驗證才能使用钾虐。）

配置ssh。打開git-bash：

#輸入笋庄，回車
ssh-keygen

git-bash

復(fù)制（右鍵+復(fù)制效扫，不能ctrl+c倔监，這里ctrl+c是結(jié)束命令的意思）圖中的/c/Users/Administrator/.ssh/id_rsa，然后把它粘貼（右鍵+粘貼）到冒號后面菌仁，然后回車浩习，回車，回車济丘。瘦锹。。直到結(jié)束（中間的冒號闪盔，除了第一個不用管只管回車）弯院。

github上生成ssh key，是本地Git綁定GitHub泪掀。
網(wǎng)頁上打開github -> 點擊頭像 -> Settings -> 左邊菜單找到 SSH and GPG keys -> New SSH key（綠色按鈕）-> title隨便填（用英文）-> key值（打開/c/Users/Administrator/.ssh/id_rsa所在的文件夾听绳，找到id_rsa.pub，注意是pub后綴那個文件异赫，用記事本打開椅挣，復(fù)制里面的內(nèi)容，粘貼到key值塔拳。） -> 點擊下面的Add SSH key -> 完成鼠证。

添加ssh key

2. 下載安裝Node.js

node.js下載地址

Node.js

安裝步驟：一路默認就行（安裝路徑根據(jù)自己需要更改）

安裝&使用Hexo

在D盤下（其他地方也可以）創(chuàng)建一個空文件夾（命名為你主頁的名字或者HEXO，隨便啦靠抑，這里以名為MyBlog為例）
打開cmd命令窗口（桌面任務(wù)欄最左邊那個wins圖標-> 搜索 -> 輸入cmd 量九，回車）。切換到D盤：（輸入颂碧，回車）D: -> 切換到剛才建的空文件夾：（輸入荠列，回車）cd MyBlog。
安裝Hexo

# 切換國內(nèi)源
npm config set registry="http://registry.cnpmjs.org"
# 安裝hexo
npm install -g hexo

等待安裝完成载城。

初始化Hexo：

# 初始化Hexo
hexo init
# 安裝必要模塊
npm install

這時肌似，MyBlog文件夾下就生成了一些文件。文件目錄如下：

├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

到此博客已經(jīng)配置好了（雖然是默認的樣子）

測試一下：

# 生成靜態(tài)文件
hexo g // 或 hexo generate
# 本地測試
hexo s // 或 hexo server

然后瀏覽器上查看 http://localhost:4000

是不是可以看到一個簡單的網(wǎng)頁（如果不能诉瓦，有可能是4000端口被別的程序占用了川队，自行百度解決方案）。

個性化

1. _config.yml文件

打開該目錄下的_config.yml文件睬澡。（用什么軟件打開固额？你可以用editplus或者vs 等，也可以直接用記事本猴贰，就是比較難看对雪，建議下個editplus吧。）

修改成你想要的內(nèi)容米绕。

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 換成你的主頁標題
subtitle: 主頁副標題
description: 主頁介紹的一句話
author: 你的名字
language: zh-CN #語言
timezone: Asia/Shanghai #時區(qū)

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

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: true
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 5
pagination_dir: page

index_generator:
  per_page: 5

archive_generator:
  per_page: 500
  yearly: true  
  monthly: true 

tag_generator:
  per_page: 100 

category_generator: 
  per_page: 100 


# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: 你用的主題文件夾名字 # themes下的文件

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
    type: git
    repository: GitHub倉庫地址
    branch: master

2. 修改主題

在hexo官網(wǎng)主題中找一個喜歡的主題瑟捣。

找到后馋艺，一般都有介紹怎么使用該主題的文章，如果沒有迈套，把網(wǎng)頁拉到最下面捐祠。看到：2018 | Powered by Hexo Theme by Aath
點擊Theme by 后面的連接桑李，一般會簡介到本主題在GitHub上的倉庫地址踱蛀。

根據(jù)說明，下載配置主題贵白。

下載主題率拒。比如：

# 切換到MyBlog文件下，cmd執(zhí)行
git clone -b master https://github.com/lewis-geek/hexo-theme-Aath.git themes/aath

一般禁荒，它會自動下載到themes文件夾下猬膨。

跟換博客的主題：
下載好后，你在_config.yml（主題是MyBlog文件夾下的）中的theme：處配置成你下在的主題名字（就是下載的主題文件夾名字）
配置主題：
根據(jù)GitHub上的說明配置themes/主題名目錄下的_config.yml（不要與MyBlog的_config.yml搞混）呛伴。不同主題勃痴，配置起來不一樣，所以在此不詳解了热康。

發(fā)布到GitHub

Github上新建倉庫：
打開GitHub網(wǎng)頁沛申，點擊頭像旁邊的“+”號 -> New repository -> 填寫名字（必須是：你GitHub的名字.github.io）

如圖

本地配置Git：
在MyBlog文件夾下的_config.yml配置（大約在底部位置）：

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

上傳：

# 如果想把原來的清除
hexo clean
# 重新生成靜態(tài)文件
hexo g
# 上傳到提交文件
hexo d

第一次提交需要GitHub登錄賬號和密碼。

上傳完成后姐军，瀏覽器打開：https://你的GitHub名字.github.io 就是你的博客主頁地址了铁材。（GitHub響應(yīng)比較慢，剛上傳需要等一小會才能打開最新的庶弃。）

寫文章

新建一篇文章：

# 新建
hexo new post 文章名

在Myblog\source\_posts目錄下你將看到一個新建的文章名.md文件衫贬。

編輯文章：
用editplus打開編輯德澈，用Markdown格式書寫歇攻。

保存時，記得把編碼方式改成utf-8梆造。Document -> File Encoding -> Convert Encoding...

建議用簡書寫（簡書設(shè)置里把編輯器改成Markdown）缴守，然后復(fù)制過去。好處是圖片存在簡書上镇辉，訪問起來快些屡穗。

上傳：（和前面一樣）

# 如果想把原來的清除
hexo clean
# 重新生成靜態(tài)文件
hexo g
# 本地測試
hexo s
# 上傳到提交文件
hexo d

到此，你的博客主頁已經(jīng)完成忽肛。

跟換域名

購買一個域名村砂。（阿里云，騰訊云屹逛，萬網(wǎng)均可注冊購買域名）
修改你域名的DNS地址為 dns22.hichina.com, dns21.hichina.com
域名解析上础废，CNAME到你的GitHub名字.github.io

域名解析
然后在你的本地站點目錄里的source目錄下添加一個CNAME文件汛骂。以文本編輯器打開CNAME，里面添加你的域名（不加http://）评腺。
在MyBlog文件夾下的_config.yml配置url：

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

重新生成靜態(tài)文件和上傳到GitHub帘瞭。

附件

1. 參考文獻：

Hexo環(huán)境搭建2018年5月版
 搭建個人博客-hexo+github詳細完整步驟
 我的博客是如何搭建的（github pages + HEXO + 域名綁定）
Hexo中文文檔

2. 我的主頁：

歡迎大家瀏覽我的主頁：http://wzmyyj.top/

wzmyyj的主頁