成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

手把手教你使用Hexo + Github Pages搭建個人獨(dú)立博客

劉福 / 2768人閱讀

摘要:設(shè)置什么是本用于介紹托管在的項(xiàng)目,不過,由于他的空間免費(fèi)穩(wěn)定,用來做搭建一個博客再好不過了。你可以通過來訪問你的個人主頁。執(zhí)行過程中可能需要讓你輸入賬戶的用戶名及密碼,按照提示操作即可。推薦使用騰訊公益。

系統(tǒng)環(huán)境配置

要使用Hexo,需要在你的系統(tǒng)中支持Nodejs以及Git,如果還沒有,那就開始安裝吧!

安裝Node.js

下載Node.js
參考地址:安裝Node.js

安裝Git

下載地址:http://git-scm.com/download/

安裝Hexo
$ cd d:/hexo
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo g # 或者h(yuǎn)exo generate
$ hexo s # 或者h(yuǎn)exo server,可以在http://localhost:4000/ 查看

這里有必要提下Hexo常用的幾個命令:

hexo generate (hexo g) 生成靜態(tài)文件,會在當(dāng)前目錄下生成一個新的叫做public的文件夾

hexo server (hexo s) 啟動本地web服務(wù),用于博客的預(yù)覽

hexo deploy (hexo d) 部署播客到遠(yuǎn)端(比如github, heroku等平臺)

另外還有其他幾個常用命令:

$ hexo new "postName" #新建文章
$ hexo new page "pageName" #新建頁面

常用簡寫

$ hexo n == hexo new
$ hexo g == hexo generate
$ hexo s == hexo server
$ hexo d == hexo deploy

常用組合

$ hexo d -g #生成部署
$ hexo s -g #生成預(yù)覽

現(xiàn)在我們打開http://localhost:4000/ 已經(jīng)可以看到一篇內(nèi)置的blog了。

目前我安裝所用的本地環(huán)境如下:(可以通過hexo -v查看)

hexo: 3.2.0
hexo-cli: 1.0.1
os: Windows_NT 6.3.9600 win32 x64
http_parser: 2.5.2
node: 4.4.1
v8: 4.5.103.35
uv: 1.8.0
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 56.1
modules: 46
openssl: 1.0.2g
Hexo主題設(shè)置

這里以主題yilia為例進(jìn)行說明。

安裝主題
$ hexo clean
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
啟用主題

修改Hexo目錄下的_config.yml配置文件中的theme屬性,將其設(shè)置為yilia。

更新主題
$ cd themes/yilia
$ git pull
$ hexo g # 生成
$ hexo s # 啟動本地web服務(wù)器

現(xiàn)在打開http://localhost:4000/ ,會看到我們已經(jīng)應(yīng)用了一個新的主題。

Github Pages設(shè)置 什么是Github Pages

GitHub Pages 本用于介紹托管在GitHub的項(xiàng)目,不過,由于他的空間免費(fèi)穩(wěn)定,用來做搭建一個博客再好不過了。

每個帳號只能有一個倉庫來存放個人主頁,而且倉庫的名字必須是username/username.github.io,這是特殊的命名約定。你可以通過http://username.github.io 來訪問你的個人主頁。

這里特別提醒一下,需要注意的個人主頁的網(wǎng)站內(nèi)容是在master分支下的。

創(chuàng)建自己的Github Pages

注冊GitHub及使用Github Pages的過程已經(jīng)有很多文章講過,在此不再詳述,可以參考:

一步步在GitHub上創(chuàng)建博客主頁 全系列

如何搭建一個獨(dú)立博客——簡明Github Pages與Hexo教程

在這里我創(chuàng)建了一個github repo叫做 jiji262.github.io. 創(chuàng)建完成之后,需要有一次提交(git commit)操作,然后就可以通過鏈接http://jiji262.github.io/ 訪問了。(現(xiàn)在還沒有內(nèi)容,別著急)

部署Hexo到Github Pages

這一步恐怕是最關(guān)鍵的一步了,讓我們把在本地web環(huán)境下預(yù)覽到的博客部署到github上,然后就可以直接通過http://jiji262.github.io/訪問了。不過很多教程文章對這個步驟語焉不詳,這里著重說下。

首先需要明白所謂部署到github的原理。

之前步驟中在Github上創(chuàng)建的那個特別的repo(jiji262.github.io)一個最大的特點(diǎn)就是其master中的html靜態(tài)文件,可以通過鏈接http://jiji262.github.io來直接訪問。

Hexo -g 會生成一個靜態(tài)網(wǎng)站(第一次會生成一個public目錄),這個靜態(tài)文件可以直接訪問。

需要將hexo生成的靜態(tài)網(wǎng)站,提交(git commit)到github上。

明白了原理,怎么做自然就清晰了。

使用hexo deploy部署

hexo deploy可以部署到很多平臺,具體可以參考這個鏈接. 如果部署到github,需要在配置文件_config.xml中作如下修改:

deploy:
  type: git
  repo: [email protected]:jiji262/jiji262.github.io.git
  branch: master

然后在命令行中執(zhí)行

hexo d

即可完成部署。

注意需要提前安裝一個擴(kuò)展:

$ npm install hexo-deployer-git --save
使用git命令行部署

不幸的是,上述命令雖然簡單方便,但是偶爾會有莫名其妙的問題出現(xiàn),因此,我們也可以追本溯源,使用git命令來完成部署的工作。

clone github repo
$ cd d:/hexo/blog

$ git clone https://github.com/jiji262/jiji262.github.io.git .deploy/jiji262.github.io

將我們之前創(chuàng)建的repo克隆到本地,新建一個目錄叫做.deploy用于存放克隆的代碼。

創(chuàng)建一個deploy腳本文件
hexo generate
cp -R public/* .deploy/jiji262.github.io
cd .deploy/jiji262.github.io
git add .
git commit -m “update”
git push origin master

簡單解釋一下,hexo generate生成public文件夾下的新內(nèi)容,然后將其拷貝至jiji262.github.io的git目錄下,然后使用git commit命令提交代碼到j(luò)iji262.github.io這個repo的master branch上。

需要部署的時候,執(zhí)行這段腳本就可以了(比如可以將其保存為deploy.sh)。執(zhí)行過程中可能需要讓你輸入Github賬戶的用戶名及密碼,按照提示操作即可。

Hexo 主題配置

每個不同的主題會需要不同的配置,主題配置文件在主題目錄下的_config.yml。
以我們使用的yilia主題為例,其提供如下的配置項(xiàng)(themeyilia_config.yml):

# Header
menu:
  主頁: /
  所有文章: /archives
  # 隨筆: /tags/隨筆

# SubNav
subnav:
  github: "#"
  weibo: "#"
  rss: "#"
  zhihu: "#"
  #douban: "#"
  #mail: "#"
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"

rss: /atom.xml

# Content
excerpt_link: more
fancybox: true
mathjax: true

# Miscellaneous
google_analytics: ""
favicon: /favicon.png

#你的頭像url
avatar: ""
#是否開啟分享
share: true
#是否開啟多說評論,填寫你在多說申請的項(xiàng)目名稱 duoshuo: duoshuo-key
#若使用disqus,請?jiān)诓┛蚦onfig文件中填寫disqus_shortname,并關(guān)閉多說評論
duoshuo: true
#是否開啟云標(biāo)簽
tagcloud: true

#是否開啟友情鏈接
#不開啟——
#friends: false

#是否開啟“關(guān)于我”。
#不開啟——
#aboutme: false
#開啟——
aboutme: 我是誰,我從哪里來,我到哪里去?我就是我,是顏色不一樣的吃貨…
其他高級使用技巧 綁定獨(dú)立域名

購買域名
在你的域名注冊提供商那里配置DNS解析,獲取GitHub的IP地址點(diǎn)擊,進(jìn)入source目錄下,添加CNAME文件

$ cd source/
$ touch CNAME
$ vim CNAME # 輸入你的域名
$ git add CNAME
$ git commit -m "add CNAME"
使用圖床

使用七牛云存儲
自己在github上搭建的圖床:http://jiji262.github.io/qiniuimgbed/ ,需要首先注冊七牛賬號使用。

添加插件

添加sitemap和feed插件

$ npm install hexo-generator-feed
$ npm install hexo-generator-sitemap

修改_config.yml,增加以下內(nèi)容

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

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

#sitemap
sitemap:
  path: sitemap.xml

配完之后,就可以訪問http://jiji262.github.io/atom.xmlhttp://jiji262.github.io/sitemap.xml,發(fā)現(xiàn)這兩個文件已經(jīng)成功生成了。

添加404公益頁面

GitHub Pages有提供制作404頁面的指引:Custom 404 Pages。

直接在根目錄下創(chuàng)建自己的404.html或者404.md就可以。但是自定義404頁面僅對綁定頂級域名的項(xiàng)目才起作用,GitHub默認(rèn)分配的二級域名是不起作用的,使用hexo server在本機(jī)調(diào)試也是不起作用的。

推薦使用騰訊公益404。

添加about頁面
$ hexo new page "about"

之后在sourceaboutindex.md目錄下會生成一個index.md文件,打開輸入個人信息即可,如果想要添加版權(quán)信息,可以在文件末尾添加:

本文鏈接:<%= post.title %>
作者: 令狐蔥
出處: http://jiji262.github.io/
本文基于 知識共享署名-相同方式共享 4.0 國際許可協(xié)議發(fā)布,歡迎轉(zhuǎn)載,演繹或用于商業(yè)目的,但是必須保留本文的署名 令狐蔥及鏈接。
添加Fork me on Github

獲取代碼,選擇你喜歡的代碼添加到hexo/themes/yilia/layout/layout.ejs的末尾即可,注意要將代碼里的you改成你的Github賬號名。

添加支付寶捐贈按鈕及二維碼支付
支付寶捐贈按鈕

在D:hexothemesyilialayout_widget目錄下新建一個zhifubao.ejs文件,內(nèi)容如下

打賞他


添加完該文件之后,要在D:/hexo/themes/yilia/_config.yml文件中啟用,如下所示,添加zhifubao

widgets:
- category
- tag
- links
- tagcloud
- zhifubao
- rss
二維碼捐贈

首先需要到這里獲取你的支付寶賬戶的二維碼圖片,支付寶提供了自定義功能,可以添加自定義文字。

我的二維碼掃描捐贈添加在about頁面,當(dāng)然你也可以添加到其它頁面,在D:hexoblogsourceabout下有index.md,打開,在適當(dāng)位置添加

歡迎您捐贈本站,您的支持是我最大的動力! ![][http://7xsxyo.com1.z0.glb.clouddn.com/2016/04/15/FoJ1F6Ht0CNaYuCdE2l52F-Fk9Vk202.png]

可以讓圖片居中顯示,注意將圖片鏈接地址換成你的即可。

添加百度站內(nèi)搜索

點(diǎn)擊進(jìn)入,點(diǎn)擊其它工具->站內(nèi)檢索->現(xiàn)在使用->新建搜索引擎->查看代碼,將代碼里的id值復(fù)制,打開/d/hexo/themes/jacman/_config.xml,配置成如下即可。

baidu_search:     ## http://zn.baidu.com/
  enable: true
  id: "1433674487421172828" ## e.g. "783281470518440642"  for your baidu search id
  site: http://zhannei.baidu.com/cse/search ## your can change to your site instead of the default site
使用不蒜子添加訪客統(tǒng)計(jì)

詳情參考搞定你的網(wǎng)站計(jì)數(shù),具體做法很簡單,就是在你的themes/your themes/layout/_partial/footer.ejs底部加入這段腳本

然后在

中間添加如下統(tǒng)計(jì)信息即可

本站總訪問量  次, 訪客數(shù)  人次, 本文總閱讀量 

不蒜子的官方服務(wù)網(wǎng)站是不蒜子,目前最大的弊端就是不開放注冊,所以對于運(yùn)行了一段時間的網(wǎng)站,不蒜子的數(shù)據(jù)都是從1開始,沒辦法設(shè)置,只有等后期開放注冊之后,登入網(wǎng)站才能對統(tǒng)計(jì)計(jì)數(shù)進(jìn)行設(shè)置。

參考鏈接

Hexo主頁
hexo你的博客
Github Pages個人博客,從Octopress轉(zhuǎn)向Hexo
如何搭建一個獨(dú)立博客——簡明Github Pages與Hexo教程
如何在一天之內(nèi)搭建以你自己名字為域名又具備cool屬性的個人博客
手把手教你建github技術(shù)博客by hexo
Markdown 語法說明 (簡體中文版)

本文原始鏈接:手把手教你使用Hexo + Github Pages搭建個人獨(dú)立博客
作者:令狐蔥
本文基于 知識共享署名-相同方式共享 4.0 國際許可協(xié)議發(fā)布,歡迎轉(zhuǎn)載,演繹或用于商業(yè)目的,但是必須保留本文的署名 令狐蔥及鏈接。

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/87737.html

相關(guān)文章

  • 把手教你用vue搭建個人

    摘要:在我轉(zhuǎn)前端以來,一直想要實(shí)現(xiàn)一個愿望自己搭建一個可以自動解析文檔的個人站今天終于實(shí)現(xiàn)啦,先貼上我的地址確認(rèn)需求其實(shí)一個最簡單的個人站,就是許多的頁面,你只要可以用寫出來就可以,然后掛到上。 在我轉(zhuǎn)前端以來,一直想要實(shí)現(xiàn)一個愿望: 自己搭建一個可以自動解析Markdown文檔的個人站 今天終于實(shí)現(xiàn)啦,先貼上我的blog地址 確認(rèn)需求 其實(shí)一個最簡單的個人站,就是許多的HTML頁面,你只要...

    xietao3 評論0 收藏0
  • 搭建博客太簡單,這次我們來做一個博客生成工具

    摘要:代碼如下首頁的模版博客網(wǎng)站的基本配置菜單生成,這里不講講中的遍歷,然后生成一個數(shù)組默認(rèn)按發(fā)布時間排序置頂替換五集成在編譯博客的過程中,一些操作利用會簡單快捷許多。 文章較長,耐心讀下來我想你肯定會有所收獲 : ) 作為一個技術(shù)人員,見到別人那光鮮亮麗的個人博客,心里總免不了想搭建自己博客的沖動。當(dāng)然,搭建博客的方式有好多種,但是大體上分這兩種: 服務(wù)端數(shù)據(jù)庫例如:你可以用 Word...

    chanthuang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<