Hexo-完全免费全平台搭建个人博客(2)-域名主题设置

2017-03-1011:01:58 发表评论 913℃热度

Hexo-完全免费全平台搭建个人博客(1)-整体搭建

上一篇文章把 Hexo 博客整体搭建一遍了，能通过  xxxxx.github.io 访问，主题也换了一个比较赏心悦目的 NexT，接下来我们在个性化设置下，更加人性化。

教程分为四大部分：

1. Hexo 设置个性域名
2. Hexo  NexT 主题设置
3. 一些常见的问题

1.Hexo 设置个性域名

首先打开电脑终端，输入npm install hexo-generator-cname --save ，安装 CNAME 工具后，会在发布的时候自动添加 CNAME 文件，里面也会自动填写域名，不过目前里面的内容是xxxxx.github.io。

登陆 GitHub，然后点击进入你博客的仓库，然后 Settings-GitHub Pages-Custom domain，里面填上你的需要绑定的域名。如果还没有域名的话，域名购买只需要几十元即可，可以参考文章：小白搭建博客教程-购买域名(1)了解域名购买相关知识，然后参考小白搭建博客教程-域名解析(3)了解相关的解析知识。

下面是域名解析部分只需要 CNAME 即可：

设置完毕后，执行下hexo clean && hexo g && hexo d 重新生成静态文件部署，然后访问自己购买绑定的域名就可以了，我的是http://github.huangbowei.com。

2.Hexo  NexT 主题设置

这里贴出我的博客_config.yml 文件与主题_config.yml 文件：

博客配置文件：

1. # Hexo Configuration
2. ## Docs: https://hexo.io/docs/configuration.html
3. ## Source: https://github.com/hexojs/hexo/
4. ​
5. # Site
6. title: Tim博客 #网站标题
7. subtitle: 不忘初心，方得始终 #网站副标题
8. description: 自学iOS开发进阶博客，分享高质量的iOS开发技术。 #网站描述
9. author: Timhbw #您的名字
10. language: zh-Hans #网站使用的语言
11. timezone: UTC #网站时区。Hexo 默认使用您电脑的时区。
12. avatar: /images/avatar.png
13. ​
14. # URL
15. ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
16. url: https://github.huangbowei.com #网址
17. root: /  #网站根目录
18. permalink: :year/:month/:day/:title/ #文章的 永久链接 格式
19. permalink_defaults: #永久链接中各部分的默认值
20. ​
21. # Directory
22. source_dir: source #资源文件夹，这个文件夹用来存放内容。
23. public_dir: public #公共文件夹，这个文件夹用于存放生成的站点文件。
24. tag_dir: tags #标签文件夹
25. archive_dir: archives #归档文件夹
26. category_dir: categories #分类文件夹
27. code_dir: downloads/code #Include code 文件夹
28. i18n_dir: :lang #国际化（i18n）文件夹
29. skip_render: #跳过指定文件的渲染，您可使用 <a href="https://github.com/isaacs/node-glob" target="\_blank" rel="external">glob 表达式</a>来匹配路径。
30. - README.md
31. ​
32. # Writing
33. new_post_name: :title.md #新文章的文件名称
34. default_layout: post #预设布局
35. auto_spacing: true #在中文和英文之间加入空格
36. titlecase: false #把标题转换为 title case
37. external_link: true #在新标签中打开链接
38. filename_case: 0 #把文件名称转换为 (1) 小写或 (2) 大写
39. render_drafts: false #显示草稿
40. post_asset_folder: false #启动 <a href="https://hexo.io/zh-cn/docs/asset-folders.html">Asset 文件夹</a>
41. relative_link: false #把链接改为与根目录的相对位址
42. future: true #显示未来的文章
43. highlight: #代码块的设置
44.   enable: true
45.   line_number: true
46.   auto_detect: false
47.   tab_replace:
48. ​
49. # Category & Tag
50. default_category: ios #默认分类
51. category_map: ios #分类别名
52. tag_map: ios #标签别名
53. ​
54. # Date / Time format
55. ## Hexo uses Moment.js to parse and display date
56. ## You can customize the date format as defined in
57. ## http://momentjs.com/docs/#/displaying/format/
58. date_format: YYYY-MM-DD #日期格式
59. time_format: HH:mm:ss  #时间格式
60. ​
61. # Pagination
62. ## Set per_page to 0 to disable pagination
63. per_page: 10 #每页显示的文章量 (0 = 关闭分页功能)
64. pagination_dir: page #分页目录
65. ​
66. # Extensions
67. ## Plugins: https://hexo.io/plugins/
68. ## Themes: https://hexo.io/themes/
69. theme: next #当前主题名称。值为<code>false</code>时禁用主题
70. ​
71. ​
72. # Deployment
73. ## Docs: https://hexo.io/docs/deployment.html
74. deploy:
75.   type: git #用 Git 发布
76.   repo: https://github.com/Timhbw/timhbw.github.io.git #刚刚在 Github 上创建的仓库的地址
77.   branch: master
78.   plugins: -hexo-generator-cname
79. ​
80. # 百度分享服务
81. baidushare: true
82. ​
83. # JiaThis 分享服务
84. jiathis: true
85. ​
86. search:
87.   path: search.xml
88.   field: post
89.   format: html
90.   limit: 10000
91. ​
92. # Extensions
93. Plugins:
94. - hexo-generator-feed
95. - hexo-generator-sitemap
96. ​
97. #Feed Atom
98. feed:
99.   type: atom
100.   path: atom.xml
101.   limit: 20
102. ​
103. #sitemap
104. sitemap:
105.   path: sitemap.xml

主题配置文件：

1. # ---------------------------------------------------------------
2. # Site Information Settings
3. # ---------------------------------------------------------------
4. ​
5. # Put your favicon.ico into hexo-site/source/ directory.
6. favicon: /favicon.ico
7. ​
8. # Set default keywords (Use a comma to separate)
9. keywords: "ios开发,objective-c教程,swift 教程, xcode 教程,网站建设,tim的博客,timblog, tim,tim博客"
10. ​
11. # Set rss to false to disable feed link.
12. # Leave rss as empty to use site's feed link.
13. # Set rss to specific value if you have burned your feed already.
14. rss:
15. ​
16. # Specify the date when the site was setup
17. #since: 2015
18. ​
19. # icon between year and author @Footer
20. authoricon: heart
21. ​
22. # Footer powered-by and theme-info copyright
23. copyright: true
24. ​
25. # Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog.
26. # See: https://support.google.com/webmasters/answer/139066
27. # Tips: Before you open this tag, remember set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com )
28. canonical: true
29. ​
30. # Change headers hierarchy on site-subtitle (will be main site description) and on all post/pages titles for better SEO-optimization.
31. seo: false
32. ​
33. # ---------------------------------------------------------------
34. # Menu Settings
35. # ---------------------------------------------------------------
36. ​
37. # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
38. menu:
39.   home: /
40.   tags: /tags
41.   categories: /categories
42.   archives: /archives
43.   about: /about
44.   sitemap: /sitemap.xml
45.   commonweal: /404.html
46. ​
47. ​
48. # Enable/Disable menu icons.
49. # Icon Mapping:
50. #   Map a menu item to a specific FontAwesome icon name.
51. #   Key is the name of menu item and value is the name of FontAwesome icon. Key is case-senstive.
52. #   When an question mask icon presenting up means that the item has no mapping icon.
53. menu_icons:
54.   enable: true
55.   #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
56.   home: home
57.   about: user
58.   categories: th
59.   schedule: calendar
60.   tags: tags
61.   archives: archive
62.   sitemap: sitemap
63.   commonweal: heartbeat
64. ​
65. ​
66. ​
67. ​
68. # ---------------------------------------------------------------
69. # Scheme Settings
70. # ---------------------------------------------------------------
71. ​
72. # Schemes
73. #scheme: Muse
74. #scheme: Mist
75. scheme: Pisces
76. ​
77. ​
78. # ---------------------------------------------------------------
79. # Font Settings
80. # - Find fonts on Google Fonts (https://www.google.com/fonts)
81. # - All fonts set here will have the following styles:
82. #     light, light italic, normal, normal italic, bold, bold italic
83. # - Be aware that setting too much fonts will cause site running slowly
84. # - Introduce in 5.0.1
85. # ---------------------------------------------------------------
86. font:
87.   enable: true
88. ​
89.   # Uri of fonts host. E.g. //fonts.googleapis.com (Default)
90.   host:
91. ​
92.   # Global font settings used on <body> element.
93.   global:
94.     # external: true will load this font family from host.
95.     external: true
96.     family: Lato
97. ​
98.   # Font settings for Headlines (h1, h2, h3, h4, h5, h6)
99.   # Fallback to global font settings.
100.   headings:
101.     external: true
102.     family:
103. ​
104.   # Font settings for posts
105.   # Fallback to global font settings.
106.   posts:
107.     external: true
108.     family:
109. ​
110.   # Font settings for Logo
111.   # Fallback to global font settings.
112.   # The size option use px as unit
113.   logo:
114.     external: true
115.     family:
116.     size:
117. ​
118.   # Font settings for <code> and code blocks.
119.   codes:
120.     external: true
121.     family:
122.     size:
123. ​
124. ​
125. ​
126. ​
127. # ---------------------------------------------------------------
128. # Sidebar Settings
129. # ---------------------------------------------------------------
130. ​
131. ​
132. # Social Links
133. # Key is the link label showing to end users.
134. # Value is the target link (E.g. GitHub: https://github.com/iissnan)
135. social:
136.   GitHub: https://github.com/timhbw
137.   微博: http://weibo.com/huangboweicom
138. ​
139. ​
140. ​
141. # Social Links Icons
142. # Icon Mapping:
143. #   Map a menu item to a specific FontAwesome icon name.
144. #   Key is the name of the item and value is the name of FontAwesome icon. Key is case-senstive.
145. #   When an globe mask icon presenting up means that the item has no mapping icon.
146. social_icons:
147.   enable: true
148.   # Icon Mappings.
149.   # KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesome
150.   GitHub: github
151.   #Twitter: twitter
152.   Weibo: weibo
153. ​
154. ​
155. # Sidebar Avatar
156. # in theme directory(source/images): /images/avatar.jpg
157. # in site  directory(source/uploads): /uploads/avatar.jpg
158. #avatar:
159. ​
160. ​
161. # Table Of Contents in the Sidebar
162. toc:
163.   enable: true
164. ​
165.   # Automatically add list number to toc.
166.   number: true
167. ​
168. ​
169. # Creative Commons 4.0 International License.
170. # http://creativecommons.org/
171. # Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
172. #creative_commons: by-nc-sa
173. #creative_commons:
174. ​
175. ​
176. sidebar:
177.   # Sidebar Position, available value: left | right
178.   #position: left
179.   position: right
180. ​
181.   # Sidebar Display, available value:
182.   #  - post    expand on posts automatically. Default.
183.   #  - always  expand for all pages automatically
184.   #  - hide    expand only when click on the sidebar toggle icon.
185.   #  - remove  Totally remove sidebar including sidebar toggle.
186.   display: post
187.   #display: always
188.   #display: hide
189.   #display: remove
190. ​
191.   # Sidebar offset from top menubar in pixels.
192.   offset: 12
193.   offset_float: 0
194. ​
195.   # Back to top in sidebar
196.   b2t: false
197. ​
198.   # Scroll percent label in b2t button
199.   scrollpercent: false
200. ​
201. ​
202. # Blog rolls
203. #links_title: Links
204. #links_layout: block
205. #links_layout: inline
206. #links:
207.   #Title: http://example.com/
208. ​
209. ​
210. # ---------------------------------------------------------------
211. # Post Settings
212. # ---------------------------------------------------------------
213. ​
214. # Automatically scroll page to section which is under <!-- more --> mark.
215. scroll_to_more: true
216. ​
217. # Automatically excerpt description in homepage as preamble text.
218. excerpt_description: true
219. ​
220. # Automatically Excerpt. Not recommend.
221. # Please use <!-- more --> in the post to control excerpt accurately.
222. auto_excerpt:
223.   enable: true
224.   length: 150
225. ​
226. # Post meta display settings
227. post_meta:
228.   item_text: true
229.   created_at: true
230.   updated_at: false
231.   categories: true
232. ​
233. # Post wordcount display settings
234. # Dependencies: https://github.com/willin/hexo-wordcount
235. post_wordcount:
236.   item_text: true
237.   wordcount: true
238.   min2read: true
239. ​
240. # Wechat Subscriber
241. #wechat_subscriber:
242.   enabled: true
243.   qcode: /uploads/wechat-qcode.jpg
244.   description: 欢迎您扫一扫上面的微信号，与我交流！
245. ​
246. ​
247. ​
248. # ---------------------------------------------------------------
249. # Misc Theme Settings
250. # ---------------------------------------------------------------
251. ​
252. # Custom Logo.
253. # !!Only available for Default Scheme currently.
254. # Options:
255. #   enabled: true/false - Replace with specific image
256. #   image: url-of-image   - Images's url
257. custom_logo:
258.   enabled: false
259.   image:
260. ​
261. ​
262. # Code Highlight theme
263. # Available value:
264. #    normal | night | night eighties | night blue | night bright
265. # https://github.com/chriskempson/tomorrow-theme
266. highlight_theme: night
267. ​
268. ​
269. # ---------------------------------------------------------------
270. # Third Party Services Settings
271. # ---------------------------------------------------------------
272. ​
273. # MathJax Support
274. mathjax:
275.   enable: false
276.   per_page: false
277.   cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
278. ​
279. ​
280. # Swiftype Search API Key
281. #swiftype_key:
282. ​
283. # Baidu Analytics ID
284. #baidu_analytics:
285. ​
286. # Duoshuo ShortName
287. duoshuo_shortname: githubhuangbowei
288. ​
289. # Disqus
290. #disqus_shortname:
291. ​
292. # Hypercomments
293. #hypercomments_id:
294. ​
295. # Gentie productKey
296. #gentie_productKey:
297. ​
298. # Support for youyan comments system.
299. # You can get your uid from http://www.uyan.cc
300. #youyan_uid: your uid
301. ​
302. # Support for LiveRe comments system.
303. # You can get your uid from https://livere.com/insight/myCode (General web site)
304. #livere_uid: your uid
305. ​
306. # Baidu Share
307. # Available value:
308. #    button | slide
309. # Warning: Baidu Share does not support https.
310. #baidushare:
311. ##  type: button
312. ​
313. # Share
314. #jiathis:
315. # Warning: JiaThis does not support https.
316. #add_this_id:
317. ​
318. # Share
319. #duoshuo_share: true
320. ​
321. # Google Webmaster tools verification setting
322. # See: https://www.google.com/webmasters/
323. #google_site_verification:
324. ​
325. # Google Analytics
326. #google_analytics:
327. ​
328. # Yandex Webmaster tools verification setting
329. # See: https://webmaster.yandex.ru/
330. #yandex_site_verification:
331. ​
332. # CNZZ count
333. #cnzz_siteid:
334. ​
335. # Application Insights
336. # See https://azure.microsoft.com/en-us/services/application-insights/
337. # application_insights:
338. ​
339. # Make duoshuo show UA
340. # user_id must NOT be null when admin_enable is true!
341. # you can visit http://dev.duoshuo.com get duoshuo user id.
342. duoshuo_info:
343.   ua_enable: true
344.   admin_enable: true
345.   user_id: xxxxxxxxxxx #填写自己的多说 id
346.   admin_nickname: timhbw博主
347. ​
348. ​
349. # Facebook SDK Support.
350. # https://github.com/iissnan/hexo-theme-next/pull/410
351. facebook_sdk:
352.   enable: false
353.   app_id:       #<app_id>
354.   fb_admin:     #<user_id>
355.   like_button:  #true
356.   webmaster:    #true
357. ​
358. # Facebook comments plugin
359. # This plugin depends on Facebook SDK.
360. # If facebook_sdk.enable is false, Facebook comments plugin is unavailable.
361. facebook_comments_plugin:
362.   enable: false
363.   num_of_posts: 10  # min posts num is 1
364.   width: 100%       # default width is 550px
365.   scheme: light     # default scheme is light (light or dark)
366. ​
367. # VKontakte API Support.
368. # To get your AppID visit https://vk.com/editapp?act=create
369. vkontakte_api:
370.   enable: false
371.   app_id:       #<app_id>
372.   like:         true
373.   comments:     true
374.   num_of_posts: 10
375. ​
376. ​
377. # Show number of visitors to each article.
378. # You can visit https://leancloud.cn get AppID and AppKey.
379. leancloud_visitors:
380.   enable: false
381.   app_id: #<app_id>
382.   app_key: #<app_key>
383. ​
384. # Show PV/UV of the website/page with busuanzi.
385. # Get more information on http://ibruce.info/2015/04/04/busuanzi/
386. busuanzi_count:
387.   # count values only if the other configs are false
388.   enable: true
389.   # custom uv span for the whole site
390.   site_uv: true
391.   site_uv_header: <i class="fa fa-user"></i>
392.   site_uv_footer: 人次
393.   # custom pv span for the whole site
394.   site_pv: true
395.   site_pv_header: <i class="fa fa-eye"></i>
396.   site_pv_footer: 次
397.   # custom pv span for one page only
398.   page_pv: true
399.   page_pv_header: <i class="fa fa-file-o"></i>
400.   page_pv_footer: 次
401. ​
402. ​
403. # Tencent analytics ID
404. # tencent_analytics:
405. ​
406. # Tencent MTA ID
407. # tencent_mta:
408. ​
409. ​
410. # Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
411. baidu_push: false
412. ​
413. # Google Calendar
414. # Share your recent schedule to others via calendar page
416. # API Documentation:
417. # https://developers.google.com/google-apps/calendar/v3/reference/events/list
418. calendar:
419.   enable: false
420.   calendar_id: <required>
421.   api_key: <required>
422.   orderBy: startTime
423.   offsetMax: 24
424.   offsetMin: 4
425.   timeZone:
426.   showDeleted: false
427.   singleEvents: true
428.   maxResults: 250
429. ​
430. # Algolia Search
431. algolia_search:
432.   enable: false
433.   hits:
434.     per_page: 10
435.   labels:
436.     input_placeholder: Search for Posts
437.     hits_empty: "We didn't find any results for the search: ${query}"
438.     hits_stats: "${hits} results found in ${time} ms"
439. ​
440. ​
441. # Local search
442. local_search:
443.   enable: true
444. ​
445. # External URL with BASE64 encrypt & decrypt
446. # Usage: {% exturl text url "title" %}
447. # Alias: {% extlink text url "title" %}
448. exturl: false
449. ​
450. ​
451. #! ---------------------------------------------------------------
452. #! DO NOT EDIT THE FOLLOWING SETTINGS
453. #! UNLESS YOU KNOW WHAT YOU ARE DOING
454. #! ---------------------------------------------------------------
455. ​
456. # Motion
457. use_motion: true
458. ​
459. # Fancybox
460. fancybox: true
461. ​
462. # Canvas-nest
463. canvas_nest: false
464. ​
465. # Script Vendors.
466. # Set a CDN address for the vendor you want to customize.
467. # For example
468. #    jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
469. # Be aware that you should use the same version as internal ones to avoid potential problems.
470. # Please use the https protocol of CDN files when you enable https on your site.
471. vendors:
472.   # Internal path prefix. Please do not edit it.
473.   _internal: lib
474. ​
475.   # Internal version: 2.1.3
476.   jquery:
477. ​
478.   # Internal version: 2.1.5
479.   # See: http://fancyapps.com/fancybox/
480.   fancybox:
481.   fancybox_css:
482. ​
483.   # Internal version: 1.0.6
484.   # See: https://github.com/ftlabs/fastclick
485.   fastclick:
486. ​
487.   # Internal version: 1.9.7
488.   # See: https://github.com/tuupola/jquery_lazyload
489.   lazyload:
490. ​
491.   # Internal version: 1.2.1
492.   # See: http://VelocityJS.org
493.   velocity:
494. ​
495.   # Internal version: 1.2.1
496.   # See: http://VelocityJS.org
497.   velocity_ui:
498. ​
499.   # Internal version: 0.7.9
500.   # See: https://faisalman.github.io/ua-parser-js/
501.   ua_parser:
502. ​
503.   # Internal version: 4.6.2
504.   # See: http://fontawesome.io/
505.   fontawesome:
506. ​
507.   # Internal version: 1
508.   # https://www.algolia.com
509.   algolia_instant_js:
510.   algolia_instant_css:
511. ​
512.   # Internal version: 1.0.0
513.   # https://github.com/hustcc/canvas-nest.js
514.   canvas_nest:
515. ​
516. ​
517. ​
518. # Assets
519. css: css
520. js: js
521. images: images
522. ​
523. # Theme version
524. version: 5.1.0
525. ​
526. # website start
527. since: 2015
528. ​
529. duoshuo_hotartical: true

3.一些常见的问题

3.1.不能上传 README.md 文件

GitHub 不能上传 README.md 文件，对于强迫症患者来说，这是不能接受的，如果按普通做法的话，当你生成静态文件然后上传的时候，hexo 会自动把README.md渲染成README.html，内容也变了，就因为这个，差点重装用另一种方法。但是经过一番摸索，搞定，下面是方法：

在博客目录下的 source  文件夹下新建README.md 文件:

然后修改博客的_config.yml ，29行左右修改为：

1. skip_render:
2. - README.md

，然后执行hexo clean && hexo g && hexo d ，再去 GitHub 上看，会发现久违的 README.md 文件出现了，这才完整，赏心悦目。

​