從零開(kāi)始

前言

搭建此博客是因?yàn)橥ㄟ^(guò)github上了解到github pages進(jìn)而知道了可以把靜態(tài)網(wǎng)頁(yè)博客托管給github倉(cāng)庫(kù) 或許您已經(jīng)通Git + Hexo 搭建個(gè)人博客網(wǎng)站了解到如何通過(guò)HEXO + GIT 實(shí)現(xiàn)個(gè)人博客網(wǎng)站的建立。但是盡管您已經(jīng)成功建立博客網(wǎng)站，但是你需要對(duì)網(wǎng)站做合適的配置和調(diào)整才能迎合你的網(wǎng)站要求。本文主要介紹HEXO的基本操作命令和網(wǎng)站的基本配置方法。

github pages介紹

Github Pages 是 github 公司提供的免費(fèi)的靜態(tài)網(wǎng)站托管服務(wù)，用起來(lái)方便而且功能強(qiáng)大，不僅沒(méi)有空間限制(為免費(fèi)用戶提供了500M空間)，還可以綁定自己的域名。 到 https://pages.github.com/ 上，看到可以創(chuàng)建的網(wǎng)站有兩類，一類是為自己或者是自己的組織創(chuàng)建站點(diǎn)，就是新建一個(gè)倉(cāng)庫(kù)，倉(cāng)庫(kù)的名字叫做，username.github.io 或者是 orgnizationname.github.io ，注意這里的 username 和 orgnizationname 要嚴(yán)格替換成你自己的用戶名或者組織名，大小寫(xiě)也要區(qū)分，不然就會(huì)有問(wèn)題。然后就往倉(cāng)庫(kù)里面放頁(yè)面內(nèi)容就行了。第二類是為項(xiàng)目創(chuàng)建網(wǎng)站，這個(gè)其實(shí)主要步驟都是一樣的，只不過(guò)稍微比創(chuàng)建用戶或組織網(wǎng)站復(fù)雜一點(diǎn)點(diǎn)。 具體的可以看這個(gè)網(wǎng)址的講解Github Pages

域名注冊(cè)和綁定

我是在萬(wàn)網(wǎng)注冊(cè)的域名和設(shè)置DNS解析，所以我只會(huì)講在阿里云下的域名綁定。 進(jìn)入到控制臺(tái)后點(diǎn)擊自己剛買的域名進(jìn)入域名管理界面，然后進(jìn)行添加解析操作，按照途中所給的值填寫(xiě)，注意將記錄值改為自己的github pages地址 最后一步必須在所建立的github倉(cāng)庫(kù)的主分支里建立一個(gè)CNAME文件內(nèi)容為你要解析到的目地地址 注意 這個(gè)CNAME文件要放到source文件里面我的路徑為

D:\hexo\blog\source\

放到這個(gè)下面的用意為你每次hexo d的時(shí)候會(huì)把你原先倉(cāng)庫(kù)的所有東西清除掉，所以你的CNAME文件也會(huì)沒(méi)有，這樣可以避免這種情況發(fā)生

hexo安裝和配置

Hexo博客搭建的基礎(chǔ)大致流程為： 安裝Node.js →安裝Git → 安裝Hexo → 安裝主題 → 本地測(cè)試運(yùn)行 → 注冊(cè)給github與coding并創(chuàng)建pages倉(cāng)庫(kù) → 部署 Node.js和git的安裝大家自己去網(wǎng)上搜下，當(dāng)以上都安好后可以通過(guò)git bash來(lái)輸入命令查看是否安裝成功以及對(duì)應(yīng)的版本

隨后執(zhí)行下述命令來(lái)安裝hexo

npm install -g hexo-cli

hexo初始化

安裝完成后要先提前建好一個(gè)文件夾，所以我在自己D盤(pán)建立了一個(gè)hexo文件夾，里面隨后剪了一個(gè)blog文件夾，用命令cd到blog這個(gè)目錄

cd d:/hexo/blog

執(zhí)行命令

hexo init  # hexo會(huì)在目標(biāo)文件夾建立網(wǎng)站所需要的所有文件
npm install  # 安裝依賴包

本地啟動(dòng)

有了必要的各種配置文件之后就可以在本地預(yù)覽效果了

 hexo g # 等同于hexo generate，生成靜態(tài)文件到public文件夾
 hexo s # 等同于hexo server，在本地服務(wù)器運(yùn)行

還有個(gè)命令

hexo clean #作用為清除靜態(tài)文件夾的內(nèi)容并刪掉，主要用于更改變更了某些地方導(dǎo)致頁(yè)面顯示不完善

之后打開(kāi)瀏覽器并輸入IP地址 http://localhost:4000/ 查看，效果如下

新建頁(yè)面和文章

hexo new "title"  # 生成新文章：\source\_posts\title.md
hexo new page "title"  # 生成新的頁(yè)面，后面可在主題配置文件中配置頁(yè)面

生成文章或頁(yè)面的模板放在博客文件夾根目錄下的 scaffolds/ 文件夾里面，文章對(duì)應(yīng)的是 post.md ，頁(yè)面對(duì)應(yīng)的是page.md，草稿的是draft.md

編輯文章

打開(kāi)新建的文章\source_posts\postName.md，其中postName是hexo new "title"中的title

---
title: Start My Blog Trip — Power By Hexo  # 文章頁(yè)面上的顯示名稱，可以任意修改，不會(huì)出現(xiàn)在URL中
date: 2017-2-10 23:49:28  # 文章生成時(shí)間，一般不改
categories: diary  # 文章分類目錄，多個(gè)分類使用[a,b,c]這種格式
tags: [Hexo,diary]  # 文章標(biāo)簽
---
#這里開(kāi)始使用markdown格式輸入你的正文。
<!--more--> 
#more標(biāo)簽以下的內(nèi)容要點(diǎn)擊“閱讀全文”才能看見(jiàn)，#more標(biāo)簽以上的內(nèi)容為你首頁(yè)顯示文章的摘要部分

MD文章編輯

如果你對(duì)MD語(yǔ)法不熟悉，推薦你去馬克飛象使用它的在線網(wǎng)頁(yè)編輯，可以實(shí)現(xiàn)一邊打字一邊查看效果，很方便。 地址：https://maxiang.io/

常用命令總結(jié)

hexo init [folder] # 初始化一個(gè)網(wǎng)站。如果沒(méi)有設(shè)置 folder ，Hexo 默認(rèn)在目前的文件夾建立網(wǎng)站
hexo new [layout] <title> # 新建一篇文章。如果沒(méi)有設(shè)置 layout 的話，默認(rèn)使用 _config.yml 中的 default_layout 參數(shù)代替。如果標(biāo)題包含空格的話，請(qǐng)使用引號(hào)括起來(lái)
hexo version # 查看版本
hexo clean # 清除緩存文件 (db.json) 和已生成的靜態(tài)文件 (public)
hexo g # 等于hexo generate # 生成靜態(tài)文件
hexo s # 等于hexo server # 本地預(yù)覽
hexo d # 等于hexo deploy # 部署，可與hexo g合并為 hexo d -g

安裝主題

前言

截止2017年，hexo和next都在更新，現(xiàn)今網(wǎng)上的版本和其對(duì)應(yīng)的配置文件都已經(jīng)發(fā)生了巨大的變化，所以我把官網(wǎng)最新的17年的版本配置文件的詳情給大家來(lái)講解，大家可以下最新的版本和看我的配置進(jìn)行修改。

主題下載

hexo主題有很多，這里我自己使用的next主題所以就以它來(lái)講。我的版本為v5.1.0（目前最新） 下載地址： https://github.com/iissnan/hexo-theme-next/releases 把下來(lái)的文件夾解壓和更名為next，并復(fù)制到theme目錄下

HEXO網(wǎng)站的配置文件

在根目錄下的_config.yml主要是對(duì)網(wǎng)站的總屬性進(jìn)行設(shè)置
如：網(wǎng)站標(biāo)題，網(wǎng)站logo,網(wǎng)站插件使用等全局的屬性
主題目錄下的_config.yml主要是針對(duì)網(wǎng)站的布局，導(dǎo)航等特性設(shè)置進(jìn)行設(shè)置

我的根目錄配置文件

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


## Site
title: Water Sister's Blog
subtitle: 生活、技術(shù)個(gè)人博客
description: 思考中.....
author: Yang ZiHao
language: zh-Hans
timezone:


## URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://www.cduyzh.com
root: /
permalink: :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: 
 - baidu_verify_n9RJHacKra.html
 - google5caece7c800b9ce3.html
## 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: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  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: 10
pagination_dir: page


## Extensions
Plugins: 
  - hexo-generator-sitemap
  - hexo-generator-baidu-sitemap




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


## Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:
    github: git@github.com:cduyzh/cduyzh.github.io.git,master    
index_generator:
  per_page: 5


archive_generator:
  per_page: 20
  yearly: true
  monthly: true


tag_generator:
  per_page: 10


menu:
  about: /about

  

  
#頭像設(shè)置
avatar: /images/yzh.jpg


## 多說(shuō)熱評(píng)文章 true 或者 false
duoshuo_hotartical: true


#sitemap
## hexo sitemap
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

  
#local search
search:
  path: search.xml
  field: post
  format: html
  limit: 1000

我的主題目錄配置文件

## ---------------------------------------------------------------
## Site Information Settings
## ---------------------------------------------------------------


## Put your favicon.ico into `hexo-site/source/` directory.
favicon: /images/favicon.ico


## Set default keywords (Use a comma to separate)
keywords: "cduyzh前端開(kāi)發(fā)博客"


## Set rss to false to disable feed link.
## Leave rss as empty to use site's feed link.
## Set rss to specific value if you have burned your feed already.
rss:


## Specify the date when the site was setup
#since: 2015


## icon between year and author @Footer
authoricon: tint


## Footer `powered-by` and `theme-info` copyright
copyright: false


## Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog.
## See: https://support.google.com/webmasters/answer/139066
## Tips: Before you open this tag, remember set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com )
canonical: true


## Change headers hierarchy on site-subtitle (will be main site description) and on all post/pages titles for better SEO-optimization.
seo: true


## ---------------------------------------------------------------
## Menu Settings
## ---------------------------------------------------------------


## When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  categories: /categories
  about: /about
  archives: /archives
  tags: /tags
  #commonweal: /404.html
  #sitemap: /sitemap.xml
  life: /categories/life
  technology: //categories/technology




## Enable/Disable menu icons.
## Icon Mapping:
##   Map a menu item to a specific FontAwesome icon name.
##   Key is the name of menu item and value is the name of FontAwesome icon. Key is case-senstive.
##   When an question mask icon presenting up means that the item has no mapping icon.
menu_icons:
  enable: true
  #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
  home: home
  about: user
  categories: th
  schedule: calendar
  tags: tags
  archives: archive
  sitemap: sitemap
  commonweal: heart
  life: coffee
  technology: cog








## ---------------------------------------------------------------
## Scheme Settings
## ---------------------------------------------------------------


## Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces




## ---------------------------------------------------------------
## Font Settings
## - Find fonts on Google Fonts (https://www.google.com/fonts)
## - All fonts set here will have the following styles:
##     light, light italic, normal, normal italic, bold, bold italic
## - Be aware that setting too much fonts will cause site running slowly
## - Introduce in 5.0.1
## ---------------------------------------------------------------
font:
  enable: true


  # Uri of fonts host. E.g. //fonts.googleapis.com (Default)
  host:


  # Global font settings used on <body> element.
  global:
    # external: true will load this font family from host.
    external: true
    family: Lato


  # Font settings for Headlines (h1, h2, h3, h4, h5, h6)
  # Fallback to `global` font settings.
  headings:
    external: true
    family:


  # Font settings for posts
  # Fallback to `global` font settings.
  posts:
    external: true
    family:


  # Font settings for Logo
  # Fallback to `global` font settings.
  # The `size` option use `px` as unit
  logo:
    external: true
    family:
    size:


  # Font settings for <code> and code blocks.
  codes:
    external: true
    family:
    size:








## ---------------------------------------------------------------
## Sidebar Settings
## ---------------------------------------------------------------




## Social Links
## Key is the link label showing to end users.
## Value is the target link (E.g. GitHub: https://github.com/iissnan)
social:
  #LinkLabel: Link
   GitHub: https://github.com/cduyzh
   知乎: https://www.zhihu.com/people/yang-zi-hao-cheng-du-da-xue
   Weibo: http://weibo.com/3290722423/
   QQ: http://wpa.qq.com/msgrd?v=3&uin=450311265&site=qq&menu=yes


## Social Links Icons
## Icon Mapping:
##   Map a menu item to a specific FontAwesome icon name.
##   Key is the name of the item and value is the name of FontAwesome icon. Key is case-senstive.
##   When an globe mask icon presenting up means that the item has no mapping icon.
social_icons:
  enable: true
  # Icon Mappings.
  # KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesome
  GitHub: github
  #Twitter: twitter
  Weibo: weibo
  QQ: qq


## Sidebar Avatar
## in theme directory(source/images): /images/avatar.jpg
## in site  directory(source/uploads): /uploads/avatar.jpg
#avatar:




## Table Of Contents in the Sidebar
toc:
  enable: true


  # Automatically add list number to toc.
  number: true




## Creative Commons 4.0 International License.
## http://creativecommons.org/
## Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
#creative_commons: by-nc-sa
#creative_commons:




sidebar:
  # Sidebar Position, available value: left | right
  position: left
  #position: right


  # Sidebar Display, available value:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  Totally remove sidebar including sidebar toggle.
  #display: post
  display: always
  #display: hide
  #display: remove


  # Sidebar offset from top menubar in pixels.
  offset: 12
  offset_float: 0


  # Back to top in sidebar
  b2t: false


  # Scroll percent label in b2t button
  scrollpercent: false




## Blog rolls
links_title: Links
#links_layout: block
#links_layout: inline
links:
  hexo: https://hexo.io/zh-cn/
  next: http://theme-next.iissnan.com/
  web project: http://www.watersister.top


## ---------------------------------------------------------------
## Post Settings
## ---------------------------------------------------------------


## Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true


## Automatically excerpt description in homepage as preamble text.
excerpt_description: true


## Automatically Excerpt. Not recommend.
## Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true
  length: 400


## Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at: false
  categories: true


## Post wordcount display settings
## Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true


#Wechat Subscriber
#wechat_subscriber:
## enabled: true
## qcode:  /images/wechatpay.jpg
## description: subscribe to my blog by scanning my public wechat account






## ---------------------------------------------------------------
## Misc Theme Settings
## ---------------------------------------------------------------


## Custom Logo.
## !!Only available for Default Scheme currently.
## Options:
##   enabled: [true/false] - Replace with specific image
##   image: url-of-image   - Images's url
custom_logo:
  enabled: false
  image: 




## Code Highlight theme
## Available value:
##    normal | night | night eighties | night blue | night bright
## https://github.com/chriskempson/tomorrow-theme
highlight_theme: night




## ---------------------------------------------------------------
## Third Party Services Settings
## ---------------------------------------------------------------


## MathJax Support
mathjax:
  enable: false
  per_page: false
  cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML




## Swiftype Search API Key
#swiftype_key:


## Baidu Analytics ID
#baidu_analytics:


## Duoshuo ShortName
duoshuo_shortname: cduyzh


## Disqus
#disqus_shortname:


## Hypercomments
#hypercomments_id:


## Gentie productKey
#gentie_productKey:


## Support for youyan comments system.
## You can get your uid from http://www.uyan.cc
#youyan_uid: your uid


## Support for LiveRe comments system.
## You can get your uid from https://livere.com/insight/myCode (General web site)
#livere_uid: your uid


## Baidu Share
## Available value:
##    button | slide
## Warning: Baidu Share does not support https.
#baidushare:
##  type: button


## Share
#jiathis:
## Warning: JiaThis does not support https.
#add_this_id:


## Share
duoshuo_share: true


## Google Webmaster tools verification setting
## See: https://www.google.com/webmasters/
#google_site_verification:


## Google Analytics
#google_analytics:


## Yandex Webmaster tools verification setting
## See: https://webmaster.yandex.ru/
#yandex_site_verification:


## CNZZ count
#cnzz_siteid:


## Application Insights
## See https://azure.microsoft.com/en-us/services/application-insights/
## application_insights:


## Make duoshuo show UA
## user_id must NOT be null when admin_enable is true!
## you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
  ua_enable: true
  admin_enable: false
  user_id: 6224774254659896065
  admin_nickname: author




## Facebook SDK Support.
## https://github.com/iissnan/hexo-theme-next/pull/410
facebook_sdk:
  enable: false
  app_id:       #<app_id>
  fb_admin:     #<user_id>
  like_button:  #true
  webmaster:    #true


## Facebook comments plugin
## This plugin depends on Facebook SDK.
## If facebook_sdk.enable is false, Facebook comments plugin is unavailable.
facebook_comments_plugin:
  enable: false
  num_of_posts: 10  # min posts num is 1
  width: 100%       # default width is 550px
  scheme: light     # default scheme is light (light or dark)


## VKontakte API Support.
## To get your AppID visit https://vk.com/editapp?act=create
vkontakte_api:
  enable: false
  app_id:       #<app_id>
  like:         true
  comments:     true
  num_of_posts: 10




## Show number of visitors to each article.
## You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: TxBSdzFliqxOpec29xEd8pO5-gzGzoHsz
  app_key: 5rH911Nhs9V7AWFjEYqe8Bz7


## Show PV/UV of the website/page with busuanzi.
## Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 訪問(wèn)用戶：
  site_uv_footer: 人
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 訪問(wèn)次數(shù)：
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: false
  page_pv_header: <i class="fa fa-file-o"></i> 點(diǎn)擊量 
  page_pv_footer: 次




## Tencent analytics ID
## tencent_analytics:


## Tencent MTA ID
## tencent_mta:




## Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true


## Google Calendar
## Share your recent schedule to others via calendar page
## ## API Documentation:
## https://developers.google.com/google-apps/calendar/v3/reference/events/list
calendar:
  enable: false
  calendar_id: <required>
  api_key: <required>
  orderBy: startTime
  offsetMax: 24
  offsetMin: 4
  timeZone:
  showDeleted: false
  singleEvents: true
  maxResults: 250


## Algolia Search
algolia_search:
  enable: false
  hits:
    per_page: 10
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}"
    hits_stats: "${hits} results found in ${time} ms"




## Local search
local_search:
  enable: true


## External URL with BASE64 encrypt & decrypt
## Usage: {% exturl text url "title" %}
## Alias: {% extlink text url "title" %}
exturl: false




#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#! ---------------------------------------------------------------


## Motion
use_motion: true


## Fancybox
fancybox: true


## Canvas-nest
canvas_nest: true


## Script Vendors.
## Set a CDN address for the vendor you want to customize.
## For example
##    jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
## Be aware that you should use the same version as internal ones to avoid potential problems.
## Please use the https protocol of CDN files when you enable https on your site.
vendors:
  # Internal path prefix. Please do not edit it.
  _internal: lib


  # Internal version: 2.1.3
  jquery: //cdn.bootcss.com/jquery/2.1.3/jquery.min.js


  # Internal version: 2.1.5
  # Fancybox: http://fancyapps.com/fancybox/
  fancybox: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.pack.js
  fancybox_css: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css


  # Internal version: 1.0.6
  fastclick: //cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js


  # Internal version: 1.9.7
  # See: https://github.com/tuupola/jquery_lazyload
  lazyload: //cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js


  # Internal version: 1.2.1
  velocity: 


  # Internal version: 1.2.1
  velocity_ui: 




  # Internal version: 0.7.9
  # See: https://faisalman.github.io/ua-parser-js/
  ua_parser:


  # Internal version: 4.6.2
  # See: http://fontawesome.io/
  fontawesome: //cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css


  # Internal version: 1
  # https://www.algolia.com
  algolia_instant_js:
  algolia_instant_css:


  # Internal version: 1.0.0
  # https://github.com/hustcc/canvas-nest.js
  canvas_nest: //cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js






## Assets
css: css
js: js
images: images


## Theme version
version: 5.1.0


## 多說(shuō)熱評(píng)文章 true 或者 false
duoshuo_hotartical: true


reward_comment: 堅(jiān)持原創(chuàng)技術(shù)分享，您的支持將鼓勵(lì)我繼續(xù)創(chuàng)作！
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg

PS:可以不用一次性看完，理解下各個(gè)屬性即可，官網(wǎng)也沒(méi)有對(duì)所有配置的中文解釋，只有一些例子配置對(duì)應(yīng)的參數(shù)而已。

相信絕大數(shù)人都沒(méi)看完，大家可以后面自己配置的時(shí)候再來(lái)看。

啟用主題

打開(kāi)站點(diǎn)配置文件， 找到 theme 字段，并將其值更改為 next

theme: next

注意:后有個(gè)空格必須要有空格哦 然后 hexo s 即可在localshost:4000地址里預(yù)覽主題效果

更換主題外觀

next有三個(gè)主題樣式

## Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces

我用的是第二個(gè)

更換語(yǔ)言為中文，在根目錄配置文件下配置language: zh-Hans

## Site
title: Water Sister's Blog
subtitle: 生活、技術(shù)個(gè)人博客
description: 思考中.....
author: Yang ZiHao
language: zh-Hans
timezone:

添加網(wǎng)站小圖標(biāo)

在主題目錄配置文件下設(shè)置

## Put your favicon.ico into `hexo-site/source/` directory.
favicon: /images/favicon.ico

大部分的設(shè)定都能在NexT的官方文檔 里面找到，如側(cè)欄、頭像、打賞、評(píng)論、訂閱、連接、分享、數(shù)據(jù)統(tǒng)計(jì)等等，在此就不多講了，照著文檔走就行了，接下只是個(gè)性定制的問(wèn)題。 所以給個(gè)官方文檔大家可以自己去看一遍： http://theme-next.iissnan.com/theme-settings.html

部署發(fā)行項(xiàng)目

前言

假設(shè)前面已經(jīng)注冊(cè)了github帳號(hào)和創(chuàng)建了對(duì)應(yīng)的倉(cāng)庫(kù)，通過(guò)配置SSH來(lái)建立連接。

生成SSH

$ ssh-keygen -t rsa -C "郵件地址@youremail.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回車>

系統(tǒng)會(huì)要求你輸入密碼，這里設(shè)置的密碼主要是在你提交Git時(shí)彈出密碼認(rèn)證，不想輸入直接回車

Enter passphrase (empty for no passphrase):<輸入加密串>
Enter same passphrase again:<再次輸入加密串>

成功后如圖：

配置SSH

找到id_rsa.pub 并復(fù)制文件內(nèi)容 id_rsa.pub文件一般位于電腦用戶配置文件夾下的一個(gè).ssh文件下C:\Users\你的用戶名.ssh 登錄Github并添加密鑰 進(jìn)入github首頁(yè)在右上角選擇settings設(shè)置。 創(chuàng)建一個(gè)新的SSH key，圖中顯示我已經(jīng)創(chuàng)建好了。 title可以隨便取

測(cè)試通過(guò)git bash鏈接到Git

鏈接Git

$ ssh -T git@github.com

提示如下：yes

The authenticity of host 'github.com (207.65.227.44)' can't be established.
RSA key fingerprint is 16:27:42:18:60:1d:7b:13:d2:b5:c4:20:7e:56:86:d8:71:f3
Are you sure you want to continue connecting (yes/no)?

以下為成功鏈接到Git

Hi XXXX! You've successfully authenticated, but GitHub does not provide shell access.

使用Git bash簡(jiǎn)單的設(shè)置一下用戶信息：

git config --global user.name your name
git config --global user.email your_email@youremail.com

部署到Github

在此之前，先安裝Git部署插件

npm install hexo-deployer-git --save

打開(kāi)根目錄配置文件，拉到底部，修改部署配置：

deploy:
  type: git
  repo:
    github: git@github.com:cduyzh/cduyzh.github.io.git,master  

注意冒號(hào)后面是網(wǎng)站對(duì)應(yīng)的用戶名，接著就是/，然后再是你的項(xiàng)目名加上 .git,master

保存后終端執(zhí)行

hexo clean
hexo g
hexo d

結(jié)果如下為成功上傳

總結(jié)

到這里基本上完成了hexo的配置和項(xiàng)目的上傳，后面我會(huì)講一些文章的編輯，分類，標(biāo)簽的運(yùn)用，還會(huì)對(duì)next主題進(jìn)行一些分析，如果想自己設(shè)置主題和樣式建議先把next主題的官方中文文檔看一下，我會(huì)對(duì)其中的一些進(jìn)行解釋。