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

2018-05-03 11:01:11 浏览数 (1)

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 文件出现了，这才完整，赏心悦目。

​

hexo

0 人点赞