2. 程式人生 > >github pages + Hexo + 域名繫結搭建個人部落格增強版

github pages + Hexo + 域名繫結搭建個人部落格增強版

阿新 • • 發佈：2019-01-11

概述

主題配置介紹

從中我們也可以看出，對於主題來講，大部分可以配置的地方其實都是在這裡的。所以我們需要了解一個基本的主題樣式。

  • duoshuo，如果你是打算採用多說評論系統的話，你需要設定這裡，但是我個人對多說沒好印象
  • youyan，有言也是國內實用比較多的評論系統之一，個人感覺相對比較穩定
  • open_in_new，我個人覺得這個東西就應該是 true，不是用新標籤的都是壞人
  • baidu_tongji，我個人使用的是百度統計，具體百度統計的使用可以檢視百度統計官網：http://tongji.baidu.com。

yelle主題完整配置

# Theme Version | 當前版本
 

Yelee: "3.5"

# >>> Basic Setup | 基礎設定 <<<

# Header | 主選單
## About Page: `hexo new page about`
## Tags Cloud Page: `hexo new page tags`
menu:
  主頁: /
  所有文章: /archives/
  #隨筆: /tags/隨筆
  標籤雲: /tags/
  關於我: /about/

# Link to your avatar | 填寫頭像地址
avatar: http://ohe65w0xx.bkt.clouddn.com/avert.png

# Small icon of Your site | 站點小圖示地址
 

favicon: /favicon.png

# Internationalization | 主題語言
## Change Language in SITE's _config.yml | 在站點配置中切換語言
## https://hexo.io/docs/internationalization.html
## Available Languages: en, zh-Hans, zh-Hant-TW, zh-Hant-HK

# Subdirectory | 子目錄
## If your site' url is 'http://yoursite.com/blog', set root_url as '/blog/'
 

## 網站若存放在子目錄，請按上面格式填寫
## https://hexo.io/docs/configuration.html#URL
root_url: 

# Year of Site Creation | 網站成立年份
since: 2016

# Social info. Bar | 社交資訊展示
## Keep "mailto:" in Email | 設定 Email 時保留 "mailto:"
## Encrypt email 加密郵件地址 http://ctrlq.org/encode/
## RSS requires a plugin to take effect | 使用 RSS 需先安裝對應外掛
## https://github.com/hexojs/hexo-generator-feed

subnav:
  Email: "[email protected]"
  #新浪微博: "sina weibo"
  GitHub: "https://github.com/xiangzhihong/"
  #V2EX: "#"
  RSS: "/atom.xml"
  #知乎: "zhihu"
  #豆瓣: "douban"
  #簡書: "jianshu"
  #SegmentFault: ""
  #部落格園: "cnblogs"
  CSDN: "http://blog.csdn.net/xiangzhihong8/"
  #Coding: ""
  #網易雲音樂: "netease"
  #蝦米音樂: "xiami"
  #bilibili: ""
  #AcFun: ""
  #niconico: ""
  #Quora: ""
  #Facebook: "#"
  #Google: "#"
  #Twitter: "#"
  #LinkedIn: "#"
  #QQ: "1044817967"
  #微信: "Wechat"
  #PayPal: "#"
  #StackOverflow: "#"
  #CodePen: ""
  #Plunker: ""
  #Instagram: "#"
  #LOFTER: ""
  #Flickr: "#"
  #reddit: ""
  #Medium: ""
  #TiddlyWiki: ""
  #Tumblr: ""
  #_500px: ""

# >>> Conments 評論系統 <<<
# Chose ONE as your comment system and keep others disable.
# 選一個作為網站評論系統，其他保持禁用。

preload_comment: true
## false: 當點選評論條等區域時再載入評論模組
## false: load comment's section until u click/hover on the bar/icon

show_count: false
## 是否在主頁文章標題旁顯示評論數（多說、Disqus）
## Add comment count after article title

disqus: 
  #on: true
  shortname: 
  # https://help.disqus.com/customer/en/portal/articles/466208-what-s-a-shortname-
  # It is unnecessary to enable disqus here if 
  # you have set "disqus_shortname" in your site's "_config.yml" 

duoshuo: 
  #on: true
  domain: 
  # 是否開啟多說評論，http://duoshuo.com/create-site/
  # 使用上面網址登陸你的多說，然後建立站點，在 domain 中填入你設定的域名前半部分
  # http://<要填的部分>.duoshuo.com (domain只填上<>裡的內容，不要填整個網址)

youyan:
  on: true
  id: 2120654
  # 是否開啟友言評論，http://www.uyan.cc/index.php
  # id 中填寫你的友言使用者數字ID，註冊後進入後臺管理即可檢視
  # 友言服務在 Web 環境下執行，普通本地環境無法檢視，請部署後在線上測試。


# >>> Style Customisation 樣式自定義 <<<

# Background | 背景
## "5": show images form bg-1.jpg to bg-5.jpg in `/yelee/source/background/`
## "5": 顯示`/yelee/source/background/`資料夾中 bg-1.jpg 到 bg-5.jpg 這5張圖片
## "0": white-gray background | 淳樸灰白背景
background_image: 5

# Base Font Size | 字號調節
base_font_size: 16  #px, 16 - 24

## General Color Scheme | 主題配色方案 
## 可用值 Value: yilia
color_scheme: 

highlight_style:
  #on: true
  inline_code: 3  # Value: 0 - 9 可選
  code_block: 2  # Value: 0 - 4 
  # Set inline_code to style highlight text
  # Chose a highlight theme for code block
  # 通過 inline_code 切換內建文字高亮樣式
  # 通過 code_block 切換內建程式碼高亮配色主題

blockquote_style:
  on: true
  blockquote: 1  # Value: 0 - 7 可選
  # 自定義文章「引用部分」的樣式

# Headings Style | 標題風格
## 0-Yelee, 1-Yilia, 2-GitHub
heading_style: 0 # Value: 0 - 2

## List style type (ul) | 無序列表項標記樣式
list_style: 0  # value: 0 - 12 可選

# 左邊欄寬度 px
left_col_width: 300

# Copyright info. of post | 文末版權資訊
copyright: true

# Table of contents | 文章目錄
toc:
  on: true
  list_number: true # 目錄序號
  max_depth: 3  # 1 - 6 (h1-h6) 目錄最大級數
  nowrap: false # Keep title on same line | 目錄標題不換行

# 是否開啟主頁及載入頭像時的動畫效果
# Animation in Homepage and Loading avatar
animate: true

# Load jQuery UI to style tooltips
# 工具提示框樣式美化
jquery_ui: false

# Max width of right cloumn | 限制右側內容的寬頻 
limit_article_width: 
  on: false
  max_width: 60 # em

# >>> Small features | 小功能設定 <<<

# 是否開啟邊欄多標籤切換
# Birdhouse button in left column
tagcloud: true

# Blogroll, Link exchange | 友情連結
friends:
  Blog: http://www.xiangzhihong.com/
  GitHub: https://pages.github.com/
  MOxFIVE: http://moxfive.xyz/
#friends: false

#是否開啟“關於我”。
aboutme: 專注於前端
#aboutme: false

# Open link in a new tab | 是否在新視窗開啟連結
## `global` 0: Set separately, 1: Open all in new 2: Open all in current
## `global` 0: 分開設定, 1: 全部在新標籤開啟, 2: 全部在"當前"標籤開啟
open_in_new:
  global: 0 # 0-2
  title: false # article title in homepage 主頁文章標題
  post: false # link within post/page 正文中的連結
  tags: false # 標籤
  categories: false # 分類
  article_nav: false # 導航
  archives: true # 歸檔
  mini_archives: true # 迷你歸檔
  menu: false # 邊欄選單
  friends: true  # 友情連結
  socail: true # 社交圖示

# Customize feed link 自定義訂閱地址
rss: /atom.xml

# Update Reminder for IE6/7/8
# 針對 IE6/7/8 的升級瀏覽器提示
ie_updater:
  on: true
  link: //outdatedbrowser.com/
  ## http://browsehappy.com/
  ## http://outdatedbrowser.com/

# Tab Title Change | 標籤頁標題切換
tab_title_change: 
  on: false
  left_tab_title: '(つェ⊂) 我藏好了哦~ '
  return_tab_title: '(*´∇｀*) 被你發現啦~ '


# >>> Vendors | 第三方工具 & 服務 <<<

# Local Site Search | 本地站內搜尋
## Insatall below plugin to take effect | 使用搜索需先安裝對應外掛
## https://github.com/PaicHyperionDev/hexo-generator-search
search: 
  #on: true
  onload: false
  ## true: get search.xml file when the page has loaded
  ## false: get the file when search box gets focus

# images viewer | 圖片瀏覽器
## http://www.fancyapps.com/fancybox/
fancybox: true

# Display Math(LaTeX, MathML...) | 數學公式支援
## https://www.mathjax.org/
mathjax: false

# Socail Share | 是否開啟分享
share: 
  on: true
  baidu: true
  addthis: false
  addthis_pubid: "ra-56ff76c972fc0cf9"
  ## Go to www.addthis.com/dashboard to get your pubid (in src of Code)
  ## and customize AddThis share buttons

# 百度、谷歌站長驗證。填寫 HTML 標籤 content
# Site Verification for Google and Baidu. HTML label content.
baidu_site: 
google_site: 

# Fill in Google Analytics tracking ID, #e.g. UA-XXXXX-X
google_analytics: 

# 百度統計 http://sitecenter.baidu.com/sc-web/
# 檢視程式碼，填入 //hm.baidu.com/hm.js? 之後的內容
baidu_tongji: 

# 不蒜子網站計數設定
# http://ibruce.info/2015/04/04/busuanzi/
visit_counter:
  on: true
  site_visit: true
  page_visit: true

# GitHub Repo Widget
# https://github.com/hustcc/GitHub-Repo-Widget.js
github_widget: false

# Progress Bar | 頁面載入進度條
# Demo: http://github.hubspot.com/pace/docs/welcome/
# type: barber-shop|big-counter|bounce|center-atom|center-circle|
#       center-radar|center-simple|corner-indicator|flash|flat-top|
#       loading-bar|mac-osx|minimal
# color: black|blue|green|orange|pink|purple|red|silver|white|yellow|
progressBar:
  on: true
  type: "minimal"  # Keep Quotes | 保留引號避免出錯
  color: blue

CDN:
  jquery: //cdn.bootcss.com/jquery/2.2.4/jquery.min.js
  require: //cdn.bootcss.com/require.js/2.2.0/require.min.js
  fontawesome: //cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css
  fancybox_js: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.js
  fancybox_css: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css
  animate_css: //cdn.bootcss.com/animate.css/3.5.1/animate.min.css
  jquery_ui_js: //cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.min.js
  jquery_ui_css: //cdn.bootcss.com/jqueryui/1.10.4/css/jquery-ui.min.css
  pace_js: //cdn.bootcss.com/pace/1.0.2/pace.min.js
  clipboard: //cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js
  mathjax: //cdn.bootcss.com/mathjax/2.6.1/MathJax.js
  scrollreveal: //cdn.bootcss.com/scrollReveal.js/3.1.4/scrollreveal.min.js

新增常用頁面

首先定位到我們的本地的blog專案，如我存放的位置是E:\blog\blog
這裡寫圖片描述

  • 新增一個 404 頁面：hexo new page 404
  • 新增一個 about 頁面：hexo new page about
  • 新增一個 tag 標籤雲頁面：hexo new page tags
  • 新增一個 robot.txt 檔案，把該檔案放在：E:\blog\blog\hexo\source 目錄下，robot 檔案內容
User-Agent: *
Allow: /
Disallow: /background
Disallow: /css
Disallow: /fancybox
Disallow: /font-awesome
Disallow: /img
Disallow: /js
Sitemap: http://code.skyheng.com/sitemap.xml
Sitemap: http://code.skyheng.com/baidusitemap.xml

其他外掛推薦

外掛的基本使用命令

外掛官網：https://hexo.io/plugins/
安裝外掛：npm install 外掛名 –save
解除安裝外掛：npm uninstall 外掛名
更新外掛和部落格框架（需要在 E:\blog_space\hexo 目錄下）：npm update
注：外掛的管理實質上是通過專案根目錄下 package.json 檔案更來管理各大外掛。

必備外掛

  • 支援RSS：npm install hexo-generator-feed –save
  • 生成站點地圖：npm install hexo-generator-sitemap –save
  • 生成百度站點地圖：npm install hexo-generator-baidu-sitemap –save
  • HTML 壓縮：npm install hexo-html-minifier –save
  • JavaScript 壓縮：npm install hexo-uglify –save
  • CSS 壓縮外掛：npm install hexo-clean-css –save
  • SEO優化：npm install hexo-generator-seo-friendly-sitemap

新增文章擡頭資訊

Hexo預設新建的文章擡頭已有title、date、tags等屬性，可能缺乏categories和meta標籤，想要指定目錄就需要新增categories屬性，而meta標籤則是為了便於搜尋引擎的收錄。想要修改的話，可以開啟D:\Hexo\scaffolds\post.md（這是你clone下來的地址）檔案在裡面新增。

title:  #文章標題
date:  #時間，一般不用改
categories:  #目錄分類
tags:  #標籤，格式可以是[Hexo,總結]，中間用英文逗號分開
keywords:  #文章關鍵詞，多個關鍵詞用英文逗號隔開

文章圖片的存放

想要在文章中插入圖片的話，可以按照Markdown語法來插入，格式為圖片名稱。圖片的存放有兩種方式：在本地D:\Hexo\source目錄下新建一個存放圖片的資料夾，比如images，然後把想要插入的圖片放在裡面，插入圖片的路徑；第二種方法是把圖片上傳到網路，然後插入圖片路徑。推薦使用第二種，比如百度雲，七牛等。

相關推薦

github pages + Hexo + 域名繫結搭建個人部落格增強版

概述 主題配置介紹 從中我們也可以看出，對於主題來講，大部分可以配置的地方其實都是在這裡的。所以我們需要了解一個基本的主題樣式。 duoshuo，如果你是打算採用多說評論系統的話，你需要設定這裡，但是我個人對多說沒好印象 youyan，有言也是國

Github pages+HEXO+域名繫結搭建個人部落格

1.搭建環境 windows 7(64 位) $ git-2.15.1-64-bit $ node-v8.9.3-x64   如果上述軟體已安裝，請跳過。沒有的，下載安裝   安裝好後檢視版本：git version  Hexo是

Jekyll搭建個人部落格-拓展版

關於Jekyll Jekyll 是一個簡單的部落格形態的靜態站點生產機器。它有一個模版目錄，其中包含原始文字格式的文件，通過 Markdown （或者 Textile） 以及 Liquid 轉化成一個完整的可釋出的靜態網站，你可以釋出在任何你喜愛的伺服器上。J

Hexo + github pages + 阿里雲繫結域名搭建個人部落格

申請域名 萬網購買的域名，地址：https://wanwang.aliyun.com/domain/com?spm=5176.8142029.388261.137.LoKzy7 控制檯進行解析 控制檯->域名與網站(萬網)->域名->域名列表->解析 設定主機記錄www

使用github-hexo-域名繫結（阿里雲）搭建個人部落格

最近心血來潮，想用github+hexo+域名繫結來搭建自己的一個部落格網站，在這其中也遇到了很多的問題，比較大的問題是在域名的繫結那裡，但最後終於在網上找到了解決方法。現在將我的搭建心得分享給大家。 下載Git 也可以用下面的百度網盤，官網下載真的慢。

基於 Hexo + GitHub Pages 搭建個人部落格

參考 markdown一些語法 1、 --- title: Hello Blog --- 2、連結[CSDN](https://blog.csdn.net/owenfy) 3、大小標題 ## Quick Start ### Create a new post 4、中間

使用Hexo + GitHub Pages 搭建個人部落格

一.前言 　　之前是在CSDN上寫部落格的，但是無奈其廣告滿天飛，還有因為個人不太喜歡CSDN部落格裡的一些東西，加上看到很多技術大牛都有自己的個人部落格，於是乎！便想著搭建一個自己的個人部落格。其實之前寫部落格還是追求於有很多人來看，以滿足自己這樣的一個慾望，後來慢慢覺得寫部落格無非是記錄一下自己成長的歷

Github Pages + Hexo 搭建個人部落格

本文原地址 開始前瞭解了自己適合那種方式搭建個人部落格的幾種高效方案 一、前置知識 GitHub Github 官網 廖雪峰教程- Git 教程 個人 Git 筆記 二、開始搭建 阮一峰教程-搭建一個免費的，無限流量的 Blog---- githu

使用Hexo + GitHub Pages搭建個人部落格

--- title: github pages+hexo搭建部落格 date: 2017-09-20 10:39:20 tags: ["技術","學習",'部落格'] --- Web 前端愛好者。寫部落格的好處，不是為了寫而寫，而是一個記錄思想的過程。不要考慮它能帶給你什麼，而是你自己從中收穫了什麼。 最近

使用 jekyll + github pages 搭建個人部落格

1. 新建 github.io 專案 其實 github pages 有兩個用途，大家可以在官方網頁看到。其中一個是作為個人/組織的主頁（每個賬號只能有一個），另一個是作為 github 專案的專案主頁（每個專案可以有一個）。 而 github pages 本身就支援 jekyll

使用Hexo+Github搭建個人部落格

個人部落格：             技術部落格：http://messi1002.top/             閱讀部落格：http://www.read1002.t

github + hexo 搭建個人部落格教程

Github Pages介紹 本來用於介紹託管在Github上上的專案，由於它的空間免費穩定，因此適合用來搭建部落格。 每個帳號只能有一個倉庫來存放個人主頁，且倉庫的名字必須是使用者名稱/ username.github.io。你可以通過http://username.github.io

GitHub、Node.js和Hexo搭建個人部落格

GitHub、Node.js和Hexo搭建個人部落格 1.Git 1.1、下載 下載地址：https://git-scm.com/downloads 1.2、Git安裝 雙擊安裝，點選Next 填寫安裝路徑，點選Next 選中安裝內容，點選Next

Mac上基於hexo+GitHub搭建個人部落格(一)

之前一直使用部落格園和簡書，但是部落格園太複雜，而簡書雖然很簡單，但是沒什麼新鮮感，偶然得知hexo+github可以搭建自己的部落格，主要是可以自己定主題，還很simple，因此，找了個時間，自己搞了一下，感覺還可以，就自己弄了一個。 1 環境配置 Hexo官網上有搭建文件！ 1.1 安

github搭建個人部落格 hexo d無效

在github上搭建個人部落格，hexo已經部署完畢，本地訪問也沒有問題，但最後hexo d就是push不上去 檢查了deploy，看不出有什麼問題，後面百度了一下，發現有個巨坑，type: git中間必須有個空格！！！！ deploy:   type: git   reposit

Mac下Hexo+GitHub搭建個人部落格

Mac下Hexo+GitHub搭建個人部落格 環境搭建 Node和Git安裝完成後，在終端下輸入下面的命令： sudo npm install -g hexo 初始化hexo 在使用者目錄下建立名為hexo的資料夾 mkdir hexo 然後cd到此目錄下

搭建個人部落格之 Github + hexo： 如何在其他電腦上更新部落格

歡迎點選參觀我的 ——> 個人學習網站 首先將原來電腦上的Hexo目錄下的這幾個檔案複製到新電腦的新建Hexo目錄下 _config.yml package.json

使用GitHub Pages+ Jekyll搭建個人部落格

前言： 今天五一假期最後一天，趁著放假，搭建一個個人部落格。之前就聽說了GitHub Pages + Jekyll來搭建，今天想都不想其他的實現方式直接就使用這兩個搭建。 關於這方面的文章很多，網上查一下一大堆，這篇文章就整理一下搭建的步驟和過程，以及遇

基於windows平臺Git+GitHub+Hexo搭建個人部落格（三）

  去年的時候使用Hexo搭建了一個部落格，當時主題使用的是JackMan，雖說這個theme是挺好看的了，但是自己感覺還少點東西，所以自從搭建好後就一直沒用，筆記還是放在CSDN上。前兩天偶然發現了一位大神的部落格，當時一眼就喜歡上了這個主題，瀏覽網站後知道大神的部落格也是用Hex

使用GitHub + Hexo搭建個人部落格（一）- 安裝

最近在同事那瞭解到，使用GitHub + Hexo可以搭建自己的個人部落格，很早之前就想自己搞個網站做部落格，由於種種原因一直沒有實現 現在可以使用開源的工具搞個部落格還是蠻不錯的，這裡和大家分享下。 1. Hexo簡介 GitHub的簡單介紹，大家可以參考我前面的部落格，