從零開始

2018-05-25 13:51 更新

2017年最新基于hexo搭建個(gè)人免費(fèi)博客——從零開始

前言

搭建此博客是因?yàn)橥ㄟ^github上了解到github pages進(jìn)而知道了可以把靜態(tài)網(wǎng)頁博客托管給github倉庫 或許您已經(jīng)通Git + Hexo 搭建個(gè)人博客網(wǎng)站了解到如何通過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ù)，用起來方便而且功能強(qiáng)大，不僅沒有空間限制(為免費(fèi)用戶提供了500M空間)，還可以綁定自己的域名。 到 https://pages.github.com/ 上，看到可以創(chuàng)建的網(wǎng)站有兩類，一類是為自己或者是自己的組織創(chuàng)建站點(diǎn)，就是新建一個(gè)倉庫，倉庫的名字叫做，username.github.io 或者是 orgnizationname.github.io ，注意這里的 username 和 orgnizationname 要嚴(yán)格替換成你自己的用戶名或者組織名，大小寫也要區(qū)分，不然就會(huì)有問題。然后就往倉庫里面放頁面內(nèi)容就行了。第二類是為項(xiàng)目創(chuàng)建網(wǎng)站，這個(gè)其實(shí)主要步驟都是一樣的，只不過稍微比創(chuàng)建用戶或組織網(wǎng)站復(fù)雜一點(diǎn)點(diǎn)。 githubpages githubpages githubpages 具體的可以看這個(gè)網(wǎng)址的講解Github Pages

域名注冊(cè)和綁定

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

  1. D:\hexo\blog\source\

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

hexo安裝和配置

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

hexo安裝和配置

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

  1. npm install -g hexo-cli

hexo初始化

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

  1. cd d:/hexo/blog

執(zhí)行命令

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

本地啟動(dòng)

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

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

還有個(gè)命令

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

之后打開瀏覽器并輸入IP地址 http://localhost:4000/ 查看，效果如下 hexo安裝和配置

新建頁面和文章

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

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

編輯文章

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

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

MD文章編輯

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

常用命令總結(jié)

  1. hexo init [folder] # 初始化一個(gè)網(wǎng)站。如果沒有設(shè)置 folder ，Hexo 默認(rèn)在目前的文件夾建立網(wǎng)站
  2. hexo new [layout] <title> # 新建一篇文章。如果沒有設(shè)置 layout 的話，默認(rèn)使用 _config.yml 中的 default_layout 參數(shù)代替。如果標(biāo)題包含空格的話，請(qǐng)使用引號(hào)括起來
  3. hexo version # 查看版本
  4. hexo clean # 清除緩存文件 (db.json) 和已生成的靜態(tài)文件 (public)
  5. hexo g # 等于hexo generate # 生成靜態(tài)文件
  6. hexo s # 等于hexo server # 本地預(yù)覽
  7. 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年的版本配置文件的詳情給大家來講解，大家可以下最新的版本和看我的配置進(jìn)行修改。

主題下載

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

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

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

我的根目錄配置文件

  1. ## Hexo Configuration
  2. ## Docs: https://hexo.io/docs/configuration.html
  3. ## Source: https://github.com/hexojs/hexo/
  6. ## Site
  7. title: Water Sister's Blog
  8. subtitle: 生活、技術(shù)個(gè)人博客
  9. description: 思考中.....
  10. author: Yang ZiHao
  11. language: zh-Hans
  12. timezone:
  15. ## URL
  16. ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
  17. url: http://www.cduyzh.com
  18. root: /
  19. permalink: :title/
  20. permalink_defaults:
  23. ## Directory
  24. source_dir: source
  25. public_dir: public
  26. tag_dir: tags
  27. archive_dir: archives
  28. category_dir: categories
  29. code_dir: downloads/code
  30. i18n_dir: :lang
  31. skip_render: 
  32.  - baidu_verify_n9RJHacKra.html
  33.  - google5caece7c800b9ce3.html
  34. ## Writing
  35. new_post_name: :title.md # File name of new posts
  36. default_layout: post
  37. titlecase: false # Transform title into titlecase
  38. external_link: true # Open external links in new tab
  39. filename_case: 0
  40. render_drafts: false
  41. post_asset_folder: true
  42. relative_link: false
  43. future: true
  44. highlight:
  45.   enable: true
  46.   line_number: true
  47.   auto_detect: false
  48.   tab_replace:
  51. ## Category & Tag
  52. default_category: uncategorized
  53. category_map:
  54. tag_map:
  57. ## Date / Time format
  58. ## Hexo uses Moment.js to parse and display date
  59. ## You can customize the date format as defined in
  60. ## http://momentjs.com/docs/#/displaying/format/
  61. date_format: YYYY-MM-DD
  62. time_format: HH:mm:ss
  65. ## Pagination
  66. ## Set per_page to 0 to disable pagination
  67. per_page: 10
  68. pagination_dir: page
  71. ## Extensions
  72. Plugins: 
  73.   - hexo-generator-sitemap
  74.   - hexo-generator-baidu-sitemap
  79. ## Plugins: https://hexo.io/plugins/
  80. ## Themes: https://hexo.io/themes/
  81. theme: next
  84. ## Deployment
  85. ## Docs: https://hexo.io/docs/deployment.html
  86. deploy:
  87.   type: git
  88.   repo:
  89.     github: git@github.com:cduyzh/cduyzh.github.io.git,master    
  90. index_generator:
  91.   per_page: 5
  94. archive_generator:
  95.   per_page: 20
  96.   yearly: true
  97.   monthly: true
  100. tag_generator:
  101.   per_page: 10
  104. menu:
  105.   about: /about
  107.   
  109.   
  110. #頭像設(shè)置
  111. avatar: /images/yzh.jpg
  114. ## 多說熱評(píng)文章 true 或者 false
  115. duoshuo_hotartical: true
  118. #sitemap
  119. ## hexo sitemap
  120. sitemap:
  121.   path: sitemap.xml
  122. baidusitemap:
  123.   path: baidusitemap.xml
  125.   
  126. #local search
  127. search:
  128.   path: search.xml
  129.   field: post
  130.   format: html
  131.   limit: 1000

我的主題目錄配置文件

  1. ## ---------------------------------------------------------------
  2. ## Site Information Settings
  3. ## ---------------------------------------------------------------
  6. ## Put your favicon.ico into `hexo-site/source/` directory.
  7. favicon: /images/favicon.ico
  10. ## Set default keywords (Use a comma to separate)
  11. keywords: "cduyzh前端開發(fā)博客"
  14. ## Set rss to false to disable feed link.
  15. ## Leave rss as empty to use site's feed link.
  16. ## Set rss to specific value if you have burned your feed already.
  17. rss:
  20. ## Specify the date when the site was setup
  21. #since: 2015
  24. ## icon between year and author @Footer
  25. authoricon: tint
  28. ## Footer `powered-by` and `theme-info` copyright
  29. copyright: false
  32. ## Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog.
  33. ## See: https://support.google.com/webmasters/answer/139066
  34. ## Tips: Before you open this tag, remember set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com )
  35. canonical: true
  38. ## Change headers hierarchy on site-subtitle (will be main site description) and on all post/pages titles for better SEO-optimization.
  39. seo: true
  42. ## ---------------------------------------------------------------
  43. ## Menu Settings
  44. ## ---------------------------------------------------------------
  47. ## When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
  48. menu:
  49.   home: /
  50.   categories: /categories
  51.   about: /about
  52.   archives: /archives
  53.   tags: /tags
  54.   #commonweal: /404.html
  55.   #sitemap: /sitemap.xml
  56.   life: /categories/life
  57.   technology: //categories/technology
  62. ## Enable/Disable menu icons.
  63. ## Icon Mapping:
  64. ##   Map a menu item to a specific FontAwesome icon name.
  65. ##   Key is the name of menu item and value is the name of FontAwesome icon. Key is case-senstive.
  66. ##   When an question mask icon presenting up means that the item has no mapping icon.
  67. menu_icons:
  68.   enable: true
  69.   #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
  70.   home: home
  71.   about: user
  72.   categories: th
  73.   schedule: calendar
  74.   tags: tags
  75.   archives: archive
  76.   sitemap: sitemap
  77.   commonweal: heart
  78.   life: coffee
  79.   technology: cog
  88. ## ---------------------------------------------------------------
  89. ## Scheme Settings
  90. ## ---------------------------------------------------------------
  93. ## Schemes
  94. #scheme: Muse
  95. scheme: Mist
  96. #scheme: Pisces
  101. ## ---------------------------------------------------------------
  102. ## Font Settings
  103. ## - Find fonts on Google Fonts (https://www.google.com/fonts)
  104. ## - All fonts set here will have the following styles:
  105. ##     light, light italic, normal, normal italic, bold, bold italic
  106. ## - Be aware that setting too much fonts will cause site running slowly
  107. ## - Introduce in 5.0.1
  108. ## ---------------------------------------------------------------
  109. font:
  110.   enable: true
  113.   # Uri of fonts host. E.g. //fonts.googleapis.com (Default)
  114.   host:
  117.   # Global font settings used on <body> element.
  118.   global:
  119.     # external: true will load this font family from host.
  120.     external: true
  121.     family: Lato
  124.   # Font settings for Headlines (h1, h2, h3, h4, h5, h6)
  125.   # Fallback to `global` font settings.
  126.   headings:
  127.     external: true
  128.     family:
  131.   # Font settings for posts
  132.   # Fallback to `global` font settings.
  133.   posts:
  134.     external: true
  135.     family:
  138.   # Font settings for Logo
  139.   # Fallback to `global` font settings.
  140.   # The `size` option use `px` as unit
  141.   logo:
  142.     external: true
  143.     family:
  144.     size:
  147.   # Font settings for <code> and code blocks.
  148.   codes:
  149.     external: true
  150.     family:
  151.     size:
  160. ## ---------------------------------------------------------------
  161. ## Sidebar Settings
  162. ## ---------------------------------------------------------------
  167. ## Social Links
  168. ## Key is the link label showing to end users.
  169. ## Value is the target link (E.g. GitHub: https://github.com/iissnan)
  170. social:
  171.   #LinkLabel: Link
  172.    GitHub: https://github.com/cduyzh
  173.    知乎: https://www.zhihu.com/people/yang-zi-hao-cheng-du-da-xue
  174.    Weibo: http://weibo.com/3290722423/
  175.    QQ: http://wpa.qq.com/msgrd?v=3&uin=450311265&site=qq&menu=yes
  178. ## Social Links Icons
  179. ## Icon Mapping:
  180. ##   Map a menu item to a specific FontAwesome icon name.
  181. ##   Key is the name of the item and value is the name of FontAwesome icon. Key is case-senstive.
  182. ##   When an globe mask icon presenting up means that the item has no mapping icon.
  183. social_icons:
  184.   enable: true
  185.   # Icon Mappings.
  186.   # KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesome
  187.   GitHub: github
  188.   #Twitter: twitter
  189.   Weibo: weibo
  190.   QQ: qq
  193. ## Sidebar Avatar
  194. ## in theme directory(source/images): /images/avatar.jpg
  195. ## in site  directory(source/uploads): /uploads/avatar.jpg
  196. #avatar:
  201. ## Table Of Contents in the Sidebar
  202. toc:
  203.   enable: true
  206.   # Automatically add list number to toc.
  207.   number: true
  212. ## Creative Commons 4.0 International License.
  213. ## http://creativecommons.org/
  214. ## Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
  215. #creative_commons: by-nc-sa
  216. #creative_commons:
  221. sidebar:
  222.   # Sidebar Position, available value: left | right
  223.   position: left
  224.   #position: right
  227.   # Sidebar Display, available value:
  228.   #  - post    expand on posts automatically. Default.
  229.   #  - always  expand for all pages automatically
  230.   #  - hide    expand only when click on the sidebar toggle icon.
  231.   #  - remove  Totally remove sidebar including sidebar toggle.
  232.   #display: post
  233.   display: always
  234.   #display: hide
  235.   #display: remove
  238.   # Sidebar offset from top menubar in pixels.
  239.   offset: 12
  240.   offset_float: 0
  243.   # Back to top in sidebar
  244.   b2t: false
  247.   # Scroll percent label in b2t button
  248.   scrollpercent: false
  253. ## Blog rolls
  254. links_title: Links
  255. #links_layout: block
  256. #links_layout: inline
  257. links:
  258.   hexo: https://hexo.io/zh-cn/
  259.   next: http://theme-next.iissnan.com/
  260.   web project: http://www.watersister.top
  263. ## ---------------------------------------------------------------
  264. ## Post Settings
  265. ## ---------------------------------------------------------------
  268. ## Automatically scroll page to section which is under <!-- more --> mark.
  269. scroll_to_more: true
  272. ## Automatically excerpt description in homepage as preamble text.
  273. excerpt_description: true
  276. ## Automatically Excerpt. Not recommend.
  277. ## Please use <!-- more --> in the post to control excerpt accurately.
  278. auto_excerpt:
  279.   enable: true
  280.   length: 400
  283. ## Post meta display settings
  284. post_meta:
  285.   item_text: true
  286.   created_at: true
  287.   updated_at: false
  288.   categories: true
  291. ## Post wordcount display settings
  292. ## Dependencies: https://github.com/willin/hexo-wordcount
  293. post_wordcount:
  294.   item_text: true
  295.   wordcount: true
  296.   min2read: true
  299. #Wechat Subscriber
  300. #wechat_subscriber:
  301. ## enabled: true
  302. ## qcode:  /images/wechatpay.jpg
  303. ## description: subscribe to my blog by scanning my public wechat account
  310. ## ---------------------------------------------------------------
  311. ## Misc Theme Settings
  312. ## ---------------------------------------------------------------
  315. ## Custom Logo.
  316. ## !!Only available for Default Scheme currently.
  317. ## Options:
  318. ##   enabled: [true/false] - Replace with specific image
  319. ##   image: url-of-image   - Images's url
  320. custom_logo:
  321.   enabled: false
  322.   image: 
  327. ## Code Highlight theme
  328. ## Available value:
  329. ##    normal | night | night eighties | night blue | night bright
  330. ## https://github.com/chriskempson/tomorrow-theme
  331. highlight_theme: night
  336. ## ---------------------------------------------------------------
  337. ## Third Party Services Settings
  338. ## ---------------------------------------------------------------
  341. ## MathJax Support
  342. mathjax:
  343.   enable: false
  344.   per_page: false
  345.   cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
  350. ## Swiftype Search API Key
  351. #swiftype_key:
  354. ## Baidu Analytics ID
  355. #baidu_analytics:
  358. ## Duoshuo ShortName
  359. duoshuo_shortname: cduyzh
  362. ## Disqus
  363. #disqus_shortname:
  366. ## Hypercomments
  367. #hypercomments_id:
  370. ## Gentie productKey
  371. #gentie_productKey:
  374. ## Support for youyan comments system.
  375. ## You can get your uid from http://www.uyan.cc
  376. #youyan_uid: your uid
  379. ## Support for LiveRe comments system.
  380. ## You can get your uid from https://livere.com/insight/myCode (General web site)
  381. #livere_uid: your uid
  384. ## Baidu Share
  385. ## Available value:
  386. ##    button | slide
  387. ## Warning: Baidu Share does not support https.
  388. #baidushare:
  389. ##  type: button
  392. ## Share
  393. #jiathis:
  394. ## Warning: JiaThis does not support https.
  395. #add_this_id:
  398. ## Share
  399. duoshuo_share: true
  402. ## Google Webmaster tools verification setting
  403. ## See: https://www.google.com/webmasters/
  404. #google_site_verification:
  407. ## Google Analytics
  408. #google_analytics:
  411. ## Yandex Webmaster tools verification setting
  412. ## See: https://webmaster.yandex.ru/
  413. #yandex_site_verification:
  416. ## CNZZ count
  417. #cnzz_siteid:
  420. ## Application Insights
  421. ## See https://azure.microsoft.com/en-us/services/application-insights/
  422. ## application_insights:
  425. ## Make duoshuo show UA
  426. ## user_id must NOT be null when admin_enable is true!
  427. ## you can visit http://dev.duoshuo.com get duoshuo user id.
  428. duoshuo_info:
  429.   ua_enable: true
  430.   admin_enable: false
  431.   user_id: 6224774254659896065
  432.   admin_nickname: author
  437. ## Facebook SDK Support.
  438. ## https://github.com/iissnan/hexo-theme-next/pull/410
  439. facebook_sdk:
  440.   enable: false
  441.   app_id:       #<app_id>
  442.   fb_admin:     #<user_id>
  443.   like_button:  #true
  444.   webmaster:    #true
  447. ## Facebook comments plugin
  448. ## This plugin depends on Facebook SDK.
  449. ## If facebook_sdk.enable is false, Facebook comments plugin is unavailable.
  450. facebook_comments_plugin:
  451.   enable: false
  452.   num_of_posts: 10  # min posts num is 1
  453.   width: 100%       # default width is 550px
  454.   scheme: light     # default scheme is light (light or dark)
  457. ## VKontakte API Support.
  458. ## To get your AppID visit https://vk.com/editapp?act=create
  459. vkontakte_api:
  460.   enable: false
  461.   app_id:       #<app_id>
  462.   like:         true
  463.   comments:     true
  464.   num_of_posts: 10
  469. ## Show number of visitors to each article.
  470. ## You can visit https://leancloud.cn get AppID and AppKey.
  471. leancloud_visitors:
  472.   enable: true
  473.   app_id: TxBSdzFliqxOpec29xEd8pO5-gzGzoHsz
  474.   app_key: 5rH911Nhs9V7AWFjEYqe8Bz7
  477. ## Show PV/UV of the website/page with busuanzi.
  478. ## Get more information on http://ibruce.info/2015/04/04/busuanzi/
  479. busuanzi_count:
  480.   # count values only if the other configs are false
  481.   enable: true
  482.   # custom uv span for the whole site
  483.   site_uv: true
  484.   site_uv_header: <i class="fa fa-user"></i> 訪問用戶：
  485.   site_uv_footer: 人
  486.   # custom pv span for the whole site
  487.   site_pv: true
  488.   site_pv_header: <i class="fa fa-eye"></i> 訪問次數(shù)：
  489.   site_pv_footer: 次
  490.   # custom pv span for one page only
  491.   page_pv: false
  492.   page_pv_header: <i class="fa fa-file-o"></i> 點(diǎn)擊量 
  493.   page_pv_footer: 次
  498. ## Tencent analytics ID
  499. ## tencent_analytics:
  502. ## Tencent MTA ID
  503. ## tencent_mta:
  508. ## Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
  509. baidu_push: true
  512. ## Google Calendar
  513. ## Share your recent schedule to others via calendar page
  514. ## ## API Documentation:
  515. ## https://developers.google.com/google-apps/calendar/v3/reference/events/list
  516. calendar:
  517.   enable: false
  518.   calendar_id: <required>
  519.   api_key: <required>
  520.   orderBy: startTime
  521.   offsetMax: 24
  522.   offsetMin: 4
  523.   timeZone:
  524.   showDeleted: false
  525.   singleEvents: true
  526.   maxResults: 250
  529. ## Algolia Search
  530. algolia_search:
  531.   enable: false
  532.   hits:
  533.     per_page: 10
  534.   labels:
  535.     input_placeholder: Search for Posts
  536.     hits_empty: "We didn't find any results for the search: ${query}"
  537.     hits_stats: "${hits} results found in ${time} ms"
  542. ## Local search
  543. local_search:
  544.   enable: true
  547. ## External URL with BASE64 encrypt & decrypt
  548. ## Usage: {% exturl text url "title" %}
  549. ## Alias: {% extlink text url "title" %}
  550. exturl: false
  555. #! ---------------------------------------------------------------
  556. #! DO NOT EDIT THE FOLLOWING SETTINGS
  557. #! UNLESS YOU KNOW WHAT YOU ARE DOING
  558. #! ---------------------------------------------------------------
  561. ## Motion
  562. use_motion: true
  565. ## Fancybox
  566. fancybox: true
  569. ## Canvas-nest
  570. canvas_nest: true
  573. ## Script Vendors.
  574. ## Set a CDN address for the vendor you want to customize.
  575. ## For example
  576. ##    jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
  577. ## Be aware that you should use the same version as internal ones to avoid potential problems.
  578. ## Please use the https protocol of CDN files when you enable https on your site.
  579. vendors:
  580.   # Internal path prefix. Please do not edit it.
  581.   _internal: lib
  584.   # Internal version: 2.1.3
  585.   jquery: //cdn.bootcss.com/jquery/2.1.3/jquery.min.js
  588.   # Internal version: 2.1.5
  589.   # Fancybox: http://fancyapps.com/fancybox/
  590.   fancybox: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.pack.js
  591.   fancybox_css: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css
  594.   # Internal version: 1.0.6
  595.   fastclick: //cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js
  598.   # Internal version: 1.9.7
  599.   # See: https://github.com/tuupola/jquery_lazyload
  600.   lazyload: //cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js
  603.   # Internal version: 1.2.1
  604.   velocity: 
  607.   # Internal version: 1.2.1
  608.   velocity_ui: 
  613.   # Internal version: 0.7.9
  614.   # See: https://faisalman.github.io/ua-parser-js/
  615.   ua_parser:
  618.   # Internal version: 4.6.2
  619.   # See: http://fontawesome.io/
  620.   fontawesome: //cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css
  623.   # Internal version: 1
  624.   # https://www.algolia.com
  625.   algolia_instant_js:
  626.   algolia_instant_css:
  629.   # Internal version: 1.0.0
  630.   # https://github.com/hustcc/canvas-nest.js
  631.   canvas_nest: //cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js
  638. ## Assets
  639. css: css
  640. js: js
  641. images: images
  644. ## Theme version
  645. version: 5.1.0
  648. ## 多說熱評(píng)文章 true 或者 false
  649. duoshuo_hotartical: true
  652. reward_comment: 堅(jiān)持原創(chuàng)技術(shù)分享，您的支持將鼓勵(lì)我繼續(xù)創(chuàng)作！
  653. wechatpay: /images/wechatpay.jpg
  654. alipay: /images/alipay.jpg

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

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

啟用主題

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

  1. theme: next

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

更換主題外觀

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

  1. ## Schemes
  2. #scheme: Muse
  3. scheme: Mist
  4. #scheme: Pisces

我用的是第二個(gè)

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

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

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

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

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

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

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

前言

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

生成SSH

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

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

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

成功后如圖： 生成SSH

配置SSH

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

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

鏈接Git

  1. $ ssh -T git@github.com

提示如下：yes

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

以下為成功鏈接到Git

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

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

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

部署到Github

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

  1. npm install hexo-deployer-git --save

打開根目錄配置文件，拉到底部，修改部署配置：

  1. deploy:
  2.   type: git
  3.   repo:
  4.     github: git@github.com:cduyzh/cduyzh.github.io.git,master

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

保存后終端執(zhí)行

  1. hexo clean
  2. hexo g
  3. hexo d

結(jié)果如下為成功上傳 部署到Github

總結(jié)

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

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)