网站建设

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

timhbw · 3月10日 · 2017年 · 340次已读

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

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

教程分为四大部分:

  1. Hexo 设置个性域名
  2. Hexo NexT 主题设置
  3. 一些timhbw博客版权所有常见的问题

1.Hexo 设置个性域名

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

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

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

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

2.Hexo NexT 主题设置

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

博客配置文件

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


# Site
title: Tim博客 #网站标题
subtitle: 不忘初心,方得始终 #网站副标题
description: 自学iOS开发进阶博客,分享高质量的iOS开发技术。 #网站描述
author: Timhbw #您的名字
language: zh-Hans #网站使用的语言
timezone: UTC #网站时区。Hexo 默认使用您电脑的时区。
avatar: /images/avatar.png


# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://github.huangbowei.com #网址
root: /#网站根目录
permalink: :year/:month/:day/:title/ #文章的 永久链接 格式
permalink_defaults: #永久链接中各部分的默认值


# Directory
source_dir: source #资源文件夹,这个文件夹用来存放内容。
public_dir: public #公共文件夹,这个文件夹用于存放生成的站点文件。
tag_dir: tags #标签文件夹
archive_dir: archives #归档文件夹
category_dir: categories #分类文件夹
code_dir: downloads/code #Include code 文件夹
i18n_dir: :lang #国际化(i18n)文件夹
skip_render: #跳过指定文件的渲染,您可使用 <a href="https://github.com/isaacs/node-glob" target="_blank" rel="external">glob 表达式</a>来匹配路径。
- README.md


# Writing
new_post_name: :title.md #新文章的文件名称
default_layout: post #预设布局
auto_spacing: true #在中文和英文之间加入空格
titlecase: false #把标题转换为 title case
external_link: true #在新标签中打开链接
filename_case: 0 #把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false #显示草稿
post_asset_folder: false #启动 <a href="https://hexo.io/zh-cn/docs/asset-folders.html">Asset 文件夹</a>
relative_link: false #把链接改为与根目录的相对位址
future: true #显示未来的文章
highlight: #代码块的设置
enable: true
line_number: true
auto_detect: false
tab_replace:


# Category & Tag
default_category: ios #默认分类
category_map: ios #分类别名
tag_map: ios #标签别名


# 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 #每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page #分页目录


# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next #当前主题名称。值为<code>false</code>时禁用主题




# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git #用 Git 发布
repo: https://github.com/Timhbw/timhbw.github.io.git #刚刚在 Github 上创建的仓库的地址
branch: master
plugins: -hexo-generator-cname


# 百度分享服务
baidushare: true


# JiaThis 分享服务
jiathis: true


search:
path: search.xml
field: post
format: html
limit: 10000


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


#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20


#sitemap
sitemap:
path: sitemap.xml

主题配置文件

#---------------------------------------------------------------
#SiteInformationSettings
#---------------------------------------------------------------


#Putyourfavicon.icointo`hexo-site/source/`directory.
favicon:/favicon.ico


#Setdefaultkeywords(Useacommatoseparate)
keywords:"ios开发,objective-c教程,swift教程,xcode教程,网站建设,tim的博客,timblog,tim,tim博客"


#Setrsstofalsetodisablefeedlink.
#Leaverssasemptytousesite'sfeedlink.
#Setrsstospecificvalueifyouhaveburnedyourfeedalready.
rss:


#Specifythedatewhenthesitewassetup
#since:2015


#iconbetweenyearandauthor@Footer
authoricon:heart


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


#Canonical,setacanonicallinktaginyourhexo,youcoulduseitforyourSEOofblog.
#See:https://support.google.com/webmasters/answer/139066
#Tips:Beforeyouopenthistag,remembersetupyourURLinhexo_config.yml(ex.url:http://yourdomain.com)
canonical:true


#Changeheadershierarchyonsite-subtitle(willbemainsitedescription)andonallpost/pagestitlesforbetterSEO-optimization.
seo:false


#---------------------------------------------------------------
#MenuSettings
#---------------------------------------------------------------


#Whenrunningthesiteinasubdirectory(e.g.domain.tld/blog),removetheleadingslash(/archives->archives)
menu:
home:/
tags:/tags
categories:/categories
archives:/archives
about:/about
sitemap:/sitemap.xml
commonweal:/404.html




#Enable/Disablemenuicons.
#IconMapping:
#MapamenuitemtoaspecificFontAwesomeiconname.
#KeyisthenameofmenuitemandvalueisthenameofFontAwesomeicon.Keyiscase-senstive.
#Whenanquestionmaskiconpresentingupmeansthattheitemhasnomappingicon.
menu_icons:
enable:true
#KeyMapsToMenuItemKey:NameOfTheIconFromFontAwesome
home:home
about:user
categories:th
schedule:calendar
tags:tags
archives:archive
sitemap:sitemap
commonweal:heartbeat








#---------------------------------------------------------------
#SchemeSettings
#---------------------------------------------------------------


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




#---------------------------------------------------------------
#FontSettings
#-FindfontsonGoogleFonts(https://www.google.com/fonts)
#-Allfontssetherewillhavethefollowingstyles:
#light,lightitalic,normal,normalitalic,bold,bolditalic
#-Beawarethatsettingtoomuchfontswillcausesiterunningslowly
#-Introducein5.0.1
#---------------------------------------------------------------
font:
enable:true


#Urioffontshost.E.g.//fonts.lug.ustc.edu.cn(Default)
host:


#Globalfontsettingsusedon<body>element.
global:
#external:truewillloadthisfontfamilyfromhost.
external:true
family:Lato


#FontsettingsforHeadlines(h1,h2,h3,h4,h5,h6)
#Fallbackto`global`fontsettings.
headings:
external:true
family:


#Fontsettingsforposts
#Fallbackto`global`fontsettings.
posts:
external:true
family:


#FontsettingsforLogo
#Fallbackto`global`fontsettings.
#The`size`optionuse`px`asunit
logo:
external:true
family:
size:


#Fontsettingsfor<code>andcodeblocks.
codes:
external:true
family:
size:








#---------------------------------------------------------------
#SidebarSettings
#---------------------------------------------------------------




#SocialLinks
#Keyisthelinklabelshowingtoendusers.
#Valueisthetargetlink(E.g.GitHub:https://github.com/iissnan)
social:
GitHub:https://github.com/timhbw
微博:http://weibo.com/huangboweicom






#SocialLinksIcons
#IconMapping:
#MapamenuitemtoaspecificFontAwesomeiconname.
#KeyisthenameoftheitemandvalueisthenameofFontAwesomeicon.Keyiscase-senstive.
#Whenanglobemaskiconpresentingupmeansthattheitemhasnomappingicon.
social_icons:
enable:true
#IconMappings.
#KeyMapsToSocialItemKey:NameOfTheIconFromFontAwesome
GitHub:github
#Twitter:twitter
Weibo:weibo




#SidebarAvatar
#inthemedirectory(source/images):/images/avatar.jpg
#insitedirectory(source/uploads):/uploads/avatar.jpg
#avatar:




#TableOfContentsintheSidebar
toc:
enable:true


#Automaticallyaddlistnumbertotoc.
number:true




#CreativeCommons4.0InternationalLicense.
#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:
#SidebarPosition,availablevalue:left|right
#position:left
position:right


#SidebarDisplay,availablevalue:
#-postexpandonpostsautomatically.Default.
#-alwaysexpandforallpagesautomatically
#-hideexpandonlywhenclickonthesidebartoggleicon.
#-removeTotallyremovesidebarincludingsidebartoggle.
display:post
#display:always
#display:hide
#display:remove


#Sidebaroffsetfromtopmenubarinpixels.
offset:12
offset_float:0


#Backtotopinsidebar
b2t:false


#Scrollpercentlabelinb2tbutton
scrollpercent:false




#Blogrolls
#links_title:Links
#links_layout:block
#links_layout:inline
#links:
#Title:http://example.com/




#---------------------------------------------------------------
#PostSettings
#---------------------------------------------------------------


#Automaticallyscrollpagetosectionwhichisunder<!--more-->mark.
scroll_to_more:true


#Automaticallyexcerptdescriptioninhomepageaspreambletext.
excerpt_description:true


#AutomaticallyExcerpt.Notrecommend.
#Pleaseuse<!--more-->intheposttocontrolexcerptaccurately.
auto_excerpt:
enable:true
length:150


#Postmetadisplaysettings
post_meta:
item_text:true
created_at:true
updated_at:false
categories:true


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


#WechatSubscriber
#wechat_subscriber:
enabled:true
qcode:/uploads/wechat-qcode.jpg
description:欢迎您扫一扫上面的微信号,与我交流!






#---------------------------------------------------------------
#MiscThemeSettings
#---------------------------------------------------------------


#CustomLogo.
#!!OnlyavailableforDefaultSchemecurrently.
#Options:
#enabled:[true/false]-Replacewithspecificimage
#image:url-of-image-Images'surl
custom_logo:
enabled:false
image:




#CodeHighlighttheme
#Availablevalue:
#normal|night|nighteighties|nightblue|nightbright
#https://github.com/chriskempson/tomorrow-theme
highlight_theme:night




#---------------------------------------------------------------
#ThirdPartyServicesSettings
#---------------------------------------------------------------


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




#SwiftypeSearchAPIKey
#swiftype_key:


#BaiduAnalyticsID
#baidu_analytics:


#DuoshuoShortName
duoshuo_shortname:githubhuangbowei


#Disqus
#disqus_shortname:


#Hypercomments
#hypercomments_id:


#GentieproductKey
#gentie_productKey:


#Supportforyouyancommentssystem.
#Youcangetyouruidfromhttp://www.uyan.cc
#youyan_uid:youruid


#SupportforLiveRecommentssystem.
#Youcangetyouruidfromhttps://livere.com/insight/myCode(Generalwebsite)
#livere_uid:youruid


#BaiduShare
#Availablevalue:
#button|slide
#Warning:BaiduSharedoesnotsupporthttps.
#baidushare:
##type:button


#Share
#jiathis:
#Warning:JiaThisdoesnotsupporthttps.
#add_this_id:


#Share
#duoshuo_share:true


#GoogleWebmastertoolsverificationsetting
#See:https://www.google.com/webmasters/
#google_site_verification:


#GoogleAnalytics
#google_analytics:


#YandexWebmastertoolsverificationsetting
#See:https://webmaster.yandex.ru/
#yandex_site_verification:


#CNZZcount
#cnzz_siteid:


#ApplicationInsights
#Seehttps://azure.microsoft.com/en-us/services/application-insights/
#application_insights:


#MakeduoshuoshowUA
#user_idmustNOTbenullwhenadmin_enableistrue!
#youcanvisithttp://dev.duoshuo.comgetduoshuouserid.
duoshuo_info:
ua_enable:true
admin_enable:true
user_id:xxxxxxxxxxx#填写自己的多说id
admin_nickname:timhbw博主




#FacebookSDKSupport.
#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


#Facebookcommentsplugin
#ThisplugindependsonFacebookSDK.
#Iffacebook_sdk.enableisfalse,Facebookcommentspluginisunavailable.
facebook_comments_plugin:
enable:false
num_of_posts:10#minpostsnumis1
width:100%#defaultwidthis550px
scheme:light#defaultschemeislight(lightordark)


#VKontakteAPISupport.
#TogetyourAppIDvisithttps://vk.com/editapp?act=create
vkontakte_api:
enable:false
app_id:#<app_id>
like:true
comments:true
num_of_posts:10




#Shownumberofvisitorstoeacharticle.
#Youcanvisithttps://leancloud.cngetAppIDandAppKey.
leancloud_visitors:
enable:false
app_id:#<app_id>
app_key:#<app_key>


#ShowPV/UVofthewebsite/pagewithbusuanzi.
#Getmoreinformationonhttp://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
#countvaluesonlyiftheotherconfigsarefalse
enable:true
#customuvspanforthewholesite
site_uv:true
site_uv_header:<iclass="fafa-user"></i>
site_uv_footer:人次
#custompvspanforthewholesite
site_pv:true
site_pv_header:<iclass="fafa-eye"></i>
site_pv_footer:次
#custompvspanforonepageonly
page_pv:true
page_pv_header:<iclass="fafa-file-o"></i>
page_pv_footer:次




#TencentanalyticsID
#tencent_analytics:


#TencentMTAID
#tencent_mta:




#EnablebaidupushsothattheblogwillpushtheurltobaiduautomaticallywhichisveryhelpfulforSEO
baidu_push:false


#GoogleCalendar
#Shareyourrecentscheduletoothersviacalendarpage
#
#APIDocumentation:
#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


#AlgoliaSearch
algolia_search:
enable:false
hits:
per_page:10
labels:
input_placeholder:SearchforPosts
hits_empty:"Wedidn'tfindanyresultsforthesearch:${query}"
hits_stats:"${hits}resultsfoundin${time}ms"




#Localsearch
local_search:
enable:true


#ExternalURLwithBASE64encrypt&decrypt
#Usage:{%exturltexturl"title"%}
#Alias:{%extlinktexturl"title"%}
exturl:false




#!---------------------------------------------------------------
#!DONOTEDITTHEFOLLOWINGSETTINGS
#!UNLESSYOUKNOWWHATYOUAREDOING
#!---------------------------------------------------------------


#Motion
use_motion:true


#Fancybox
fancybox:true


#Canvas-nest
canvas_nest:false


#ScriptVendors.
#SetaCDNaddressforthevendoryouwanttocustomize.
#Forexample
#jquery:https://ajax.lug.ustc.edu.cn/ajax/libs/jquery/2.2.0/jquery.min.js
#Beawarethatyoushouldusethesameversionasinternalonestoavoidpotentialproblems.
#PleaseusethehttpsprotocolofCDNfileswhenyouenablehttpsonyoursite.
vendors:
#Internalpathprefix.Pleasedonoteditit.
_internal:lib


#Internalversion:2.1.3
jquery:


#Internalversion:2.1.5
#See:http://fancyapps.com/fancybox/
fancybox:
fancybox_css:


#Internalversion:1.0.6
#See:https://github.com/ftlabs/fastclick
fastclick:


#Internalversion:1.9.7
#See:https://github.com/tuupola/jquery_lazyload
lazyload:


#Internalversion:1.2.1
#See:http://VelocityJS.org
velocity:


#Internalversion:1.2.1
#See:http://VelocityJS.org
velocity_ui:


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


#Internalversion:4.6.2
#See:http://fontawesome.io/
fontawesome:


#Internalversion:1
#https://www.algolia.com
algolia_instant_js:
algolia_instant_css:


#Internalversion:1.0.0
#https://github.com/hustcc/canvas-nest.js
canvas_nest:



#Assets
css:css
js:js
images:images


#Themeversion
version:5.1.0


#websitestart
since:2015


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

0 条回应