Hexo NexT 博客與Github page 關聯指南


上篇文章 Hexo 博客框架NexT主題搭建指南

我們已經在本地搭建好了Hexo博客框架NexT 主題的博客程序,但是這感覺還是遠遠不夠。

我們還想把它部署到我們的Github上,讓其他人可以看到我們的博客。

那么這節課就跟我一起來學習吧~

0x01 准備工作

一個Github帳號

一個域名

一個Hexo NexT主題的博客程序

0x02 開始操作

1. 點擊 'New repository',創建一個版本倉庫

2. 設置倉庫名稱時有兩個注意的地方

比如比如我的GitHub 地址: https://github.com/geekxingyun

那么名稱必須是geekxingyun,后綴必須是github.io

最后全稱: geekxingyun.github.io

頁面訪問到這個地址,我們記錄下

把這個git地址處理記錄下,待會要用

https://github.com/geekxingyun/geekxingyun.github.io.git

3. 我之前已經購買了阿里雲域名,這里配置下解析

這里記錄類型我們選擇CNAME,因為這種類型可以將我們的域名指向另外一個域名。

 

 4. Github 配置

 

  往下滾動到最下面我們可以看到這個

輸入自定義域名后,點擊Save 之后你會看到下面這樣

到這里我忍不住點擊打開了下,發現這個

到這里我們已經成功了一半了,我們還需要將代碼部署到我們的GitHub 上

5. 修改博客配置文件

修改_config.yml,在文件最底部添加如下代碼

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

Tips:這里有個坑,我開始前綴用的https://github.com,結果后面一直部署失敗,必須改成下面這種才行

repository: ssh://git@github.com/geekxingyun/geekxingyun.github.io.git

 完整配置文件:

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

# Site
title: Hexo
subtitle:
description:
keywords:
author: John Doe
language:
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.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: false
  tab_replace:
  
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
# 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: 10
pagination_dir: page

# 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: ssh://git@github.com/geekxingyun/geekxingyun.github.io.git
  branch: master
View Code

6. 初始化自己的帳號和密碼

這一步驟是為了以后我們用git命令提交不再需要繁瑣的輸入我們的Github帳號和密碼。

在C:\Users\fairy\Documents\HexoBlog 目錄下,執行下列命令配置你的用戶名

git config --global user.name "geekxingyun"

配置郵箱

git config --global user.email "fairy_xingyun@hotmail.com"

執行結果如圖所示:

進入.ssh 隱藏文件夾

cd  ~/.ssh

連續三個回車,生成密鑰,最后得到了兩個文件:id_rsa和id_rsa.pub

ssh-keygen -t rsa -C "fairy_xingyun@hotmail.com"

生成文件默認路徑

 

輸入eval "$(ssh-agent -s)",添加密鑰到ssh-agent

eval "$(ssh-agent -s)"

結果會像這樣:

 再次輸入命令

ssh-add ~/.ssh/id_rsa

 

7. 添加帳號SSH Keys

登錄Github,點擊頭像下的settings,添加ssh

 新建一個new ssh key,將id_rsa.pub文件里的內容復制上去

輸入下列命令進行驗證是否成功

ssh -T git@github.com

Tips:出現上述字樣說明連接成功。

0x03 部署項目

這里需要補充點部署方面的知識:https://hexo.io/docs/deployment.html

需要安裝一個Hexo插件

npm install hexo-deployer-git --save

 之后你應該可以看到這樣的結果:

好了,我們現在可以把代碼進行下處理了 

清理下項目

hexo clean

 重新生成

hexo generate

部署

hexo deploy

 執行成功后會出現這個樣子:

打開我們的域名:

http://www.520geek.cn/

訪問結果如圖所示:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM