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

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

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

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

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

教程分为四大部分:

  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)了解相关的解析知识。

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

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

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

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

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

 

主题配置文件

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

3.一些常见的问题

3.1.不能上传 README.md 文件

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

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

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

然后修改博客的_config.yml ,29行左右修改为:

  1. skip_render:
  2. - README.md

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

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

avatar
广告也精彩

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: