使用Gitee和Hexo創建自己的博客

一、安裝Git與Node

(一) 安裝Git

• 在Windows下安裝Git：

  在Windows上安裝Git較爲簡單，因此不過多敘述。

• 在Linux下安裝Git：

  使用Linux包管理工具進行安裝，例如Yum，sudo yum install git。

• 在Mac下安裝Git：

  Git在Mac下既可以通過GUI的方式來安裝也可以通過Command的方式來安裝，使用Homebrew進行安裝：sudo brew install git。如果沒有安裝HomBrew，可以參考 https://brew.sh/index_zh-cn

• Git代理相關：

  • 查看當前的代理設置：

    git config --global http.proxy
    git config --global https.proxy

  • 設置當前代理：

    git config --global http.proxy 'http://127.0.0.1:1080'
    git config --global https.proxy 'http://127.0.0.1:1080'

    或者:

    git config --global http.proxy 'socks5://127.0.0.1:1080'
    git config --global https.proxy 'socks5://127.0.0.1:1080'

  • 刪除代理：

    git config --global --unset http.proxy
    git config --global --unset https.proxy

(二) 安裝Node

• 在Windows下安裝Node：

  在Windows上安裝Node較爲簡單，因此不過多敘述。

• 在Linux上安裝Node：

  • 到NodeJs官方網站下載Linux系統的tar.gz壓縮文件

  • 將文件解壓到指定的目錄, 這裏以/home/blue/applications目錄爲例

    tar -xvf node-v10.16.0-linux-x64.tar.xz
    mv node-v10.16.0 /home/blue/applications
    ln -s /home/blue/applications/node /home/blue/applications/node

  • 修改可執行文件的權限：

    chmod -R 755 /home/blue/applications/node-v10.16.0
    chmod -R 755 /home/blue/applications/node

  • 執行測試

    node -v
    npm -v

• 在Mac上安裝Node：

  Node爲Mac提供了GUI方式, 但是我們還可以通過HomeBrew來安裝：

  sudo brew install node

• Node相關設置：

  • 設置使用阿里NPM源：

    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global

    下面是Yarn的配置(必須安裝Yarn以後)：

    yarn config set registry 'https://registry.npm.taobao.org'

  • 設置NPM緩存：

    npm config set prefix "/home/blue/applications/cache/node/prefix"
    npm config set cache "/home/blue/applications/cache/node/cache"

    還需要將/home/blue/applications/cache/node/prefix添加到PATH環境變量

  • 使用Yarn：

    npm install -g yarn

二、創建遠程倉庫與安裝Hexo

• 安裝Hexo：sudo npm install -g hexo

• 安裝必要的插件：npm install hexo-renderer-jade hexo-renderer-stylus --save

• 創建本地倉庫

  cd ~/Code
  mkdir bluemiaomiao
  cd bluemiaomiao
  hexo init
  git init

• 創建遠程倉庫

  git add remote origin <YOUR_GIT_REPO_ADDRESS>

• 安裝主題

  git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
  rm -rf /themes/landscape

• Hexo的配置 _config.yml

  # 配置網站的標題
  title: 愛吃糖的藍胖子de官方博客
  # 配置網站的子標題
  subtitle: bluemiaomiao.github.io
  # 配置網站的表述信息
  description: 一個Sre攻城獅的奮鬥歷程
  keywords:
  # 配置網站的作者名稱
  author: BlueMiaomiao
  # 配置網站的語言爲中文
  language: zh-CN
  # 配置網站的時區爲中國北京時間
  timezone: Asia/Shanghai
  
  # 配置站點發布的URL地址
  url: http://bluemiaomiao.github.io
  root: /
  permalink: :year/:month/:day/:title/
  permalink_defaults:
  
  source_dir: source
  # 配置靜態文件的生成目錄，在Gitee部署時需要使用
  public_dir: docs
  tag_dir: tags
  archive_dir: archives
  category_dir: categories
  code_dir: downloads/code
  i18n_dir: :lang
  skip_render:
  
  new_post_name: :title.md
  default_layout: post
  titlecase: false
  external_link: true
  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:
  
  index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
  default_category: uncategorized
  category_map:
  tag_map:
  
  date_format: YYYY-MM-DD
  time_format: HH:mm:ss
  
  per_page: 10
  pagination_dir: page
  
  # 配置使用的主題
  theme: Butterfly
  
  deploy:
  type:

• 主題的配置

  mkdir source/_data
  cp themes/Butterfly/_config.yml source/_data/_butterfly.yml

  menu:
  主頁: /||fa fa-home
  時間軸: /archives/||fa fa-archive
  標籤: /tags/||fa fa-tags
  分類: /categories/||fa fa-folder-open
  友鏈: /link/||fa fa-link
  關於: /about/||fa fa-heart
  
  favicon: /img/favicon.ico
  
  highlight_theme: pale night
  highlight_copy: true
  
  code_word_wrap: true
  
  social:
  fa fa-home: https://bluemiaomiao.gitee.io/
  fa fa-github: https://github.com/bluemiaomiao
  fa fa-gitlab: https://gitee.com/bluemiaomiao
  fa fa-plane: https://blog.51cto.com/xvjunjie
  fa fa-rocket: https://www.cnblogs.com/bluemiaomiao
  fa fa-rss: https://blog.nowcoder.net/bluemiaomiao
  
  algolia_search:
  enable: false
  hits:
      per_page: 6
  
  labels:
      input_placeholder: Search for Posts
      hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
      hits_stats: "${hits} results found in ${time} ms"
  
  local_search:
  enable: false
  labels:
      input_placeholder: Search for Posts
      hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
  
  mathjax:
  enable: false
  cdn: https://cdn.jsdelivr.net/npm/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML
  
  katex:
  enable: false
  cdn:
      css: https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css  
  hide_scrollbar: true
  
  google_analytics:
  
  stylesheets:
  - /css/index.css
  
  scripts:
  - /js/utils.js
  - /js/main.js
  
  cdn:
  css:
      fontawesome: https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
      googlefont: https://fonts.googleapis.com/css?family=Titillium+Web
      fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css
  js:
      jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js
      fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js
      js-cookies: https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js
      lozy: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js
  
  avatar: /img/avatar.png
  
  top_img: /img/year-28.jpg
  
  post_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/Photo/post.png
  
  default_cover: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png
  
  archive_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/Photo/archive.jpg
  
  lodding_bg:
  flink: /img/friend_404.gif
  post_page: /img/404.jpg
  
  post_meta:
  date_type: both 
  categories: true 
  tags: true
  
  wordcount:
  enable: true
  
  toc:
  enable: true
  number: false
  
  auto_open_sidebar:
  enable: false
  
  post_copyright:
  enable: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
  
  auto_excerpt:
  enable: true
  length: 150
  
  addThis:
  enable: false
  pubid:
  
  sharejs:
  enable: true
  sites: facebook,twitter,wechat,weibo,qq
  
  addtoany:
  enable: false
  item:
      - facebook
      - twitter
      - wechat
      - sina_weibo
      - facebook_messenger
      - email
      - copy_link
  
  disqus:
  enable: false
  shortname: 
  
  valine:
  enable: false
  appId:   
  appKey:   
  notify: false 
  verify: false 
  pageSize: 10 
  avatar: monsterid 
  lang: en # i18n: zh-cn/en/tw
  placeholder: Please leave your footprints
  guest_info: nick,mail,link
  
  since: 2016
  
  footer_custom_text: 技術成就夢想, 實力鑄就輝煌
  
  footer_copyright:
  enable: true
  
  ICP:
  enable: false
  url: 
  text:
  
  # 關閉數據統計功能
  busuanzi:
  site_uv: false
  site_pv: false
  page_pv: false
  
  google_site_verification:
  
  bing_site_verification:
  
  baidu_site_verification:
  
  qihu_site_verification:
  
  # 友情鏈接基礎信息
  Flink:
  headline: 友情鏈接
  info_headline: 開始認識博主
  name: BlueMiaomiao
  address: bluemiaomiao.gitee.io
  avatar: https://jerryc.me/img/avatar.png
  info: 技術成就夢想, 實力鑄就輝煌
  comment: 添加友鏈請留言
  
  # 是否顯示整站運行的時間
  runtimeshow:
  enable: true
  start_date: 12/02/2016 12:30:00
  
  # 是否支持夜間模式
  nightshift:
  enable: true
  
  activate_power_mode:
  enable: false
  
  # 網站公告
  announcement:
  content: 博主郵箱：[email protected]/[email protected]
  
  # 是否打開文章讚賞功能
  reward:
  enable: true
  QR_code:
      - itemlist:
          img: /img/wechat-me.jpg
          text: 微信
      - itemlist:
          img: /img/alipay-me.jpg
          text: 支付寶
  
  # 文章自動推薦功能
  related_post:
  enable: false
  limit: 6
  
  canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  
  # 開啓背景飄帶功能
  canvas_ribbon_piao:
  enable: true
  
  # 避免網址重複SEO
  canonical: true
  
  # 禁止百度轉碼
  disable_baidu_transformation: true
  
  twitter_meta: true
  Open_Graph_meta: true
  
  # 閱讀模式
  readmode:
  enable: true
  
  # 開啓字體支持
  font:
  enable: false
  font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB,"Microsoft JhengHei", "MicrMicrosoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
  code-font: consolas, Menlo, "PingFang SC", "Microsoft JhengHei","Microsoft YaHei", monospace, Helvetica Neue For Number
  
  # 水平分割線
  hr:
  enable: true
  icon: '\f21c'
  icon-top: -20px
  
  # 主頁子標題
  subtitle: 
  enable: true
  sub1: 技術成就夢想, 實力鑄就輝煌
  sub2: bluemiaomiao.gitee.io
  
  # 側邊功能模塊設置
  aside:
  card_author: true
  card_announcement: true
  card_recent_post: true
  card_categories: true
  card_tags: true
  card_archives: true
  card_webinfo: false
  
  # 中文繁體假體自動轉換
  translate:
  enable: true
  # 默認顯示的語言
  default: 簡
  #網站默認語言，1: 繁體中文, 2: 簡體中文
  defaultEncoding: 2
  #延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認爲0
  translateDelay: 0
  #博客網址
  cookieDomain: "https://bluemiaomiao.gitee.io/"
  #當文字是簡體時，按鈕的文本
  msgToTraditionalChinese: "繁"
  #當文字是繁體時，按鈕的文本
  msgToSimplifiedChinese: "簡"
  
  # 鼠標點擊效果
  fireworks:
  enable: true
  
  #百度推送
  baidu_push:
  enable: false

• 主題安裝配置文檔：https://jerryc.me/posts/21cfbf15/

• 生成靜態頁面：hexo g

• 預覽靜態頁面：hexo s

• 發佈靜態頁面：

  git add .
  git commit -m "init"
  git push origin masters

• 創建與gitee用戶名相同的代碼倉庫，啓用Gitee Pages服務，發佈master分支的docs目錄

• 使用瀏覽器訪問：https://<YOUR_USERNAME>.gitee.io

Gitee的Pages服務是一個近實時的Httpd服務，Hexo生成的文章即使發佈到代碼倉庫，也不一定通過瀏覽器進行顯示，一般會有30分鐘的延遲。

三、常用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 #生成並上傳