使用Github Pages和Hexo構建我的博客

時間  2019-12-01
標籤 使用 github pages hexo 構建 我的 博客 欄目 Git 简体版
原文   原文鏈接

Github Pages能夠建立免費的靜態站點，支持自帶主題、支持自制頁面等，而且能夠使用Jekyll或者Hexo等靜態博客框架進行管理。 獨立博客是博客園等博客平臺以外的一個良好補充，相比使用虛擬主機或者雲服務器搭建站點，靜態博客管理和使用簡潔，使用Github Pages搭建博客不失爲一個好選擇。javascript

使用Github很快就能夠搭建一個站點,能夠分爲如下幾步：html

  • 在Github建立對應倉庫java

  • 配置Jekyll或者Hexo環境git

  • 設置主題，安裝評論等插件github

 

1、使用Github建立站點

1.建立一個新的倉庫

建立Github Pages比較簡單，只要在Github建立一個倉庫就能夠，這個倉庫命名須要遵循必定規則，其格式必須爲：yourusername.github.io。npm

如今新建一個repository，名稱設置爲bingyue.github.io。bash

2.添加一個頁面

Github Pages支持使用master分支或者gh-pages分支，若是是某個倉庫的wiki頁面,須要設置文檔到gh-pages 分支中，我的站點使用默認的master分支就能夠。服務器

把工程Clone 到本地，在根目錄建立一個index.html架構

<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<p>I'm hosted with GitHub Pages.</p>
</body>
</html>

　

3.發佈並預覽站點

提交新建的頁面，push到遠程倉庫，而後訪問你的站點地址就能夠預覽了。hexo

 

4.設置默認主題等

在Repository的設置頁面，能夠配置域名，更改默認的主題等。

 

2、使用靜態博客框架管理站點

Gitpages支持使用Jekyll或者Hexo等靜態博客框架進行管理，與github pages綁定，能夠編輯博文，生成靜態博客等。

1.選擇jekyll仍是hexo

目前主流的靜態博客框架是Jekyll和Hexo， Jekyll基於Ruby實現，安裝Jekyll須要搭建Ruby環境，Hexo基於Node.Js實現。 這兩個靜態程序功能基本相似，兩個程序都有博文預覽功能，能夠在本地啓動服務，默認都使用Markdown語法，另外Jekyll是Github推薦的管理程序。

實際應用中，我第一次安裝的是Jekyll，在Mac環境下配置中發現Ruby安裝繁瑣，配置Jekyll主題等須要對Ruby的基本應用有些瞭解，好比Gemfile／Rails等的做用，看了一下論壇的吐槽，若是是Windows環境可能會更加棘手。相比之下，Node.Js在類Uinx系統和Windows系統下的安裝和應用都比較簡單，開發同窗也會比較熟悉JavaScript 。

除非對Ruby比較熟悉，推薦你們使用Hexo進行站點管理。

2.安裝Hexo環境

這裏跳過了安裝Node環境的步驟。

使用下面的命令安裝Hexo:

sudo npm install -g hexo-cli

查看是否安裝：

hexo version

初始化工程目錄：

 hexo init <yourFolder>

一些經常使用命令：

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

　　

3.發表一篇文章

hexo new "第一篇文章"

會提示相應的輸出：

INFO Created: ~/Work/bingyue.github.io/source/_posts/第一篇文章.md

接下來編輯這篇文章：

---
title: 第一篇文章
date: 2017-03-08 11:28:45
tags:
---

歡迎來到個人博客！

　　

而後發佈博客，進行本地預覽:

hexo server

　　

4.配置你的Hexo

Hexo默認會讀取根目錄的config.yml得到站點信息，另外在themes/landscape中也有一份config.yml文件，配置的是站點的主題和一些我的設置。

新建一個_config.yml，更改Title等站點信息，能夠參考這份說明：

# Site
title: 邴越的博客 #標題
subtitle: 紙上得來終覺淺 #副標題
description: 邴越 博客 架構 寫做 #描述
author: 邴越 #做者
language: zh-CN #語言
timezone:  Asia/Shanghai #時區

# URL 
url: https://bingyue.github.io/   #網址
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 #新文章標題
default_layout: post #默認模板(post page photo draft)
titlecase: false #標題轉換成大寫
external_link: true #新標籤頁裏打開鏈接
filename_case: 0 #把文件名稱轉換爲 (1) 小寫或 (2) 大寫
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
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination 
per_page: 10 #每頁文章數, 設置成 0 禁用分頁
pagination_dir: page #分頁目錄

 

具體的配置能夠查看這個說明：https://hexo.io/zh-cn/docs/configuration.html

截止目前，咱們所作的修改都是在本地，並無推送到遠程倉庫，接下來怎麼讓其餘人看到咱們發佈的博客呢？

 

5.關聯Hexo與Github

(1)安裝擴展

須要安裝hexo-deployer-git擴展：

npm install hexo-deployer-git --save

　　

(2)修改_config.yml文件

添加相似以下的部署配置：

deploy:
  type: git
  repo: git@github.com:bingyue/bingyue.github.io.git
  branch: master

　　

執行

hexo clean  
hexo gegerate
hexo deploy

　　

這時候你再查看，會發現相關的文件已經被push到對應的git分支上。

從新訪問https://bingyue.github.io，會發現已經更新爲新的主題。

 

 

3、更改博客主題，設置評論插件等

1.選擇主題

以安裝Next主題爲例， 從Next的Gihub倉庫中獲取最新版本：

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

　　

打開_config.yml作以下修改:

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

　　

2.配置評論插件

Hexo默認使用的評論插件是Disqus，Disqus在國內可能不太穩定，這裏配置使用多說的評論框，具體參考多說文檔。

在_config.yml中添加多說的配置：

  duoshuo_shortname: 站點的short_name

這裏的short_name可能會讓人困惑，這是你註冊多說帳戶時的二級域名，多說二級域名是指你註冊多說時，填寫的abc.duoshuo.com中的abc部分。 

多說做爲一個社會化評論系統，是有本身管理後臺的，須要進行開發者註冊，點進這個註冊頁面你就知道了：http://duoshuo.com/create-site/

接下來修改themes\landscape\layout_partial\article.ejs模板，替換下面的文件

 <% if (!index && post.comments && config.disqus_shortname){ %>
  <section id="comments">
    <div id="disqus_thread">
      <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>
  </section>
  <% } %>

　　

改成

<% if (!index && post.comments && config.duoshuo_shortname){ %>
  <section id="comments">
    <!-- 多說評論框 start -->
    <div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>
    <!-- 多說評論框 end -->
    <!-- 多說公共JS代碼 start (一個網頁只需插入一次) -->
    <script type="text/javascript">
    var duoshuoQuery = {short_name:'<%= config.duoshuo_shortname %>'};
      (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
         || document.getElementsByTagName('body')[0]).appendChild(ds);
      })();
      </script>
    <!-- 多說公共JS代碼 end -->
  </section>
  <% } %>

 

從新發布站點，點開一篇文章會看到評論框已經加載出來了。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程