1.添加Google統(tǒng)計
- 訪問Google Analytics,需要登錄,按照提示填寫網(wǎng)站信息開通GA服務(wù)枢冤，獲取統(tǒng)計ID扛邑。
- 編輯
主題配置文件, 找到關(guān)鍵字google_analytics, 刪除注釋#并填寫獲取到的統(tǒng)計ID
google_analytics: your-analytics-id
2.開啟不蒜子博客訪問量統(tǒng)計
- 編輯
主題配置文件, 找到關(guān)鍵字busuanzi_count
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: <i class="fa fa-user"></i> 訪問人數(shù)
site_uv_footer:
# custom pv span for the whole site
site_pv: true
site_pv_header: <i class="fa fa-eye"></i> 總訪問量
site_pv_footer:
# custom pv span for one page only
page_pv: true
page_pv_header: <i class="fa fa-eye"></i> 閱讀次數(shù)
page_pv_footer:
3.添加分享功能
image.png
- 我選擇的是AddThis作為博客的第三方分享。AdThis是國外的第三方分享,使用方便,可以用google直接登錄。能自定義分享樣式
3.1 注冊AddThis人断，選擇分享按鈕：
image.png
3.2 選擇顯示樣式(Select a Tool Type),AddThis提供了7種顯示樣式,你可以更加左邊菜單欄點擊,右邊會自動顯示你選擇的相應(yīng)樣式。值得注意的是朝蜘。在其右上角可以切換PC和Phone顯示
image.png
3.3 點擊Continue配置分享按鈕,注意：不同的風(fēng)格樣式,配置方式不同
image.png
3.4 配置完成后 , 獲取代碼ID , 在js代碼中獲取pubid后面的ID
image.png
3.5 編輯主題配置文件, 找到關(guān)鍵字add_this_id, 添加pubid
4.添加文章書寫樣式
4.1 文字增加背景色塊
image.png
- 打開
themes/next/source/css/_custom下的custom.styl文件,添加屬性樣式
// 顏色塊-黃
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e;
}
// 顏色塊-綠
span#inline-green {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #5cb85c;
}
// 顏色塊-藍(lán)
span#inline-blue {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #2780e3;
}
// 顏色塊-紫
span#inline-purple {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #9954bb;
}
- 在你需要編輯的文章地方恶迈。放置如下代碼
<span id="inline-blue"> 站點配置文件 </span>
<span id="inline-purple"> 主題配置文件 </span>
<span id="inline-yellow"> 站點配置文件 </span>
<span id="inline-green"> 主題配置文件 </span>
4.2下載樣式
image.png
- 打開
themes/next/source/css/_custom下的custom.styl文件,添加屬性樣式
a#download {
display: inline-block;
padding: 0 10px;
color: #000;
background: transparent;
border: 2px solid #000;
border-radius: 2px;
transition: all .5s ease;
font-weight: bold;
&:hover {
background: #000;
color: #fff;
}
}
- 在你需要編輯的文章地方。放置如下代碼
<a id="download" ><i class="fa fa-download"></i><span> Download Now</span> </a>
4.3 在文檔中增加圖標(biāo), Font Awesome 提供圖標(biāo)
image.png
<i class="fa fa-pencil"></i>支持Markdown
5.添加Disqus評論系統(tǒng)
-
Disqus注冊很簡單谱醇，主要是獲取
Shortname
image.png 編輯
主題配置文件, 找到關(guān)鍵字disqus
# Disqus
disqus:
enable: true
shortname: you-shortname
count: true
6.綁定godaddy域名
- Note:這里講的是
Github綁定godaddy域名暇仲。 - 提示：
如果你想好好的搭建個人博客,那么建議你在國內(nèi)購買域名和主機(jī)(騰訊或者阿里都可以,看你個人喜好)。優(yōu)點：訪問速度快副渴，百度抓取方便奈附。畢竟一分錢一分貨。缺點:主機(jī)價格太貴煮剧，購買域名和主機(jī)需要實名認(rèn)證和報備,很麻煩斥滤，而且報備需要等3-5天讼载。如果你只是打算玩玩，試試水中跌，為后期準(zhǔn)備，那么建議里在godaddy購買域名,購買信息你隨便填寫菇篡。Github上托管博客漩符。優(yōu)點：方便，不用實名認(rèn)證和報備驱还。價格便宜嗜暴，只需要購買域名即可。還可以練手,可隨時棄坑议蟆。缺點：訪問速度較慢闷沥。需要你自己把控blog安裝的插件。Github屏蔽了百度抓取咐容，處理比較麻煩舆逃。
6.1打開終端,ping你的github.io獲取ip地址
$ ping your.github.io
6.2進(jìn)入你的域名DNS管理，修改信息
image.png
6.3設(shè)置GitHub
image.png
7.如果你覺得godaddy麻煩戳粒，可以用dnspod托管你的域名
7.1 注冊路狮，dnspod是騰訊的,可以使用QQ直接注冊登錄
7.2 域名解析
image.png
7.3 根據(jù)域名解析，配置
image.png
8.SEO 優(yōu)化
8.1 需要安裝兩個插件來生成 sitemap 文件蔚约，前一個是傳統(tǒng)的 sitemap奄妨，后一個是百度的 sitemap(如果你blog托管在GitHub,并且，若果你不想在多花錢弄百度抓取苹祟，可以不用安裝百度的 sitemap)
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
8.2 編輯站點配置文件 ,文件末尾添加：
sitemap:
??path: sitemap.xml
baidusitemap:
??path: baidusitemap.xml
8.3 編輯站點配置文件 , 搜索關(guān)鍵字url,并修改url
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :category/:title/
permalink_defaults:
8.4 添加蜘蛛?yún)f(xié)議
- 在站點
source文件夾下新建robots.txt文件砸抛，文件內(nèi)容如下:
User-agent: *
Allow: /
Allow: /archives/
Allow: /tags/
Allow: /categories/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Sitemap: http://yoursite.com/sitemap.xml
Sitemap: http://yoursite.com/baidusitemap.xml
-
Allow字段的值即為允許搜索引擎爬區(qū)的內(nèi)容，/表示網(wǎng)站首頁树枫，/categories/為分類頁面直焙，如果菜單欄還有其他選項都可以按照格式自行添加。
8.5 提交站點到 Google
8.5.1 打開 Google Search Console砂轻，添加博客地址箕般。并進(jìn)行相關(guān)驗證,根據(jù)提示即可完成認(rèn)證,認(rèn)證成功如下：
image.png
8.5.2 驗證通過后點進(jìn)入控制臺測試robots.txt文件,沒有錯誤和警告即可
image.png
8.5.3 提交 sitemap.xml 文件，點擊右上角添加/測試站點地圖輸入 sitemap.xml 進(jìn)行測試舔清，測試無誤后再提交文件
image.png
8.5.4 robots.txt驗證和sitemap.xml驗證通過丝里，抓取網(wǎng)頁
image.png
- 輸入框留空表示抓取首頁，填入 about 表示抓取關(guān)于頁面体谒，抓取完成后,抓取因為驗證原因,可能會有幾種狀態(tài)：完成杯聚、部分完成和已重定向等，不過無需擔(dān)心抒痒，這些狀態(tài)并不會影響提交幌绍。此時點擊請求編入索引即可，至此博客就成功提交到了 Google
8.5.5 驗證站點是否被收錄
-
谷歌中輸入：site:yousite傀广，會有提示：(抓取需要時間。等幾分鐘)
image.png
8.6 提交站點到 BaiDu
- 如果你是github上部署的blog誓酒，百度是不能直接爬去到你的網(wǎng)站的。現(xiàn)最簡單實惠的辦法是搭建CDN.相關(guān)文章:如何解決百度爬蟲無法爬取搭建在Github上的個人博客的問題贮聂？
8.6.1 進(jìn)入百度站長管理，單擊站點管理吓懈，添加網(wǎng)站，進(jìn)行認(rèn)證
image.png
8.6.2 HTML標(biāo)簽認(rèn)證
image.png
- 打開
themes/next/layout/_partials/head.swig文件耻警，搜索baidu_site_verification替換復(fù)制的內(nèi)容
{% if theme.baidu_site_verification %}
<meta name="baidu-site-verification" content="9v8CMO9Qh8" />{% endif %}
-
主題配置文件隔嫡， 添加代碼如下
baidu_site_verification: true
- 然后
hexo clean
hexo g
hexo d
- 然后點擊完成驗證
8.6.4 驗證Robots文件是否生效
image.png
- 驗證完成后，自己的網(wǎng)站會被提交畔勤，過段時間在百度中驗證站點是否收錄即可(一般為2-7天)
Hexo-Next-主題優(yōu)化(一)
Hexo-Next-主題優(yōu)化(二)
Hexo-Next-主題優(yōu)化(三)
