自定义个人微博排版
以個(gè)人博客為例,博客地址
準(zhǔn)備工作
安裝
$ npm install -g hexo-cli初始化
$ hexo init <folder> $ cd <folder> $ npm install創(chuàng)建新文章
$ hexo new "My New Post"運(yùn)行開發(fā)環(huán)境
$ hexo server $ hexo s構(gòu)建
$ hexo generate $ hexo g部署
$ hexo deploy $ hexo d詳細(xì)準(zhǔn)備工作,可以查閱hexo官網(wǎng)
安裝主題cactus,一個(gè)很程序員的主題,推薦!
克隆倉(cāng)庫(kù),并且將源文件復(fù)制到博客項(xiàng)目中themes目錄下
git clone https://github.com/probberechts/hexo-theme-cactus.git themes/cactusthemes/cactus/_config.yml相關(guān)配置,詳細(xì)解釋可以看官方文檔
# 首頁(yè)P(yáng)rojects的url projects_url: https://github.com/xiaobinwu # 設(shè)置頁(yè)面方向 direction: ltr # 首頁(yè)導(dǎo)航 # $ hexo new page about,可以創(chuàng)建page頁(yè)面 nav:home: /about: /about/articles: /archives/categories: /categories/search: /search/ # 社交鏈接 social_links:github: https://github.com/xiaobinwumail: mailto:xiaobin_wu@yahoo.com # 開啟標(biāo)簽快捷方式 tags_overview: true # 首頁(yè) Writing的展示條數(shù) posts_overview:show_all_posts: falsepost_count: 5sort_updated: false # 排列方式 archive:sort_updated: false post:show_updated: false # logo設(shè)置 logo:enabled: truewidth: 50height: 50url: /images/logo.pnggravatar: false # ico設(shè)置 favicon:desktop:url: /images/favicon.icogravatar: falseandroid:url: /images/favicon-192x192.pnggravatar: falseapple:url: /images/apple-touch-icon.pnggravatar: false # 高亮語法 highlight: kimbie.dark # 博客主題色,dark, light, classic, white colorscheme: dark page_width: 48 # rss設(shè)置 rss: atom.xml open_graph:fb_app_id:fb_admins:twitter_id:google_plus: # disqus評(píng)論,默認(rèn)不開啟,需FQ disqus:enabled: falseshortname: cactus-1 # 谷歌統(tǒng)計(jì) google_analytics:enabled: falseid: UA-86660611-1 # 百度統(tǒng)計(jì) baidu_analytics:enabled: falseid: 2e6da3c375c8a87f5b664cea6d4cb29cgravatar:email: xiaobin_wu@yahoo.comvaline:enable: trueapp_id: xxxxxxapp_key: xxxxxxxValine評(píng)論系統(tǒng)
themes/cactus/_config.yml配置Valine,需要申請(qǐng)app_id,app_key
valine:enable: trueapp_id: xxxxapp_key: xxxxthemes/cactus/layout/_partial/comments.ejs,寫入
<% if(theme.valine.enable) { %><script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script><script src='//unpkg.com/valine/dist/Valine.min.js'></script><div id="vcomments" class="blog-post-comments"></div><script>new Valine({el: '#vcomments',visitor: true,appId: '<%=theme.valine.app_id %>',appKey: '<%=theme.valine.app_key %>',placeholder: 'ヾノ≧?≦)o來啊,快活啊!',avatar: 'robohash'})</script> <% } %>自動(dòng)部署hexo博客到阿里云服務(wù)器
創(chuàng)建倉(cāng)庫(kù)(遠(yuǎn)端服務(wù)器創(chuàng)建git倉(cāng)庫(kù)),可以使用ssh登入云服務(wù)器
mkdir blog.git && cd blog.git git init --bareHexo配置
deploy:type: gitmessage: updaterepo: root@xx.xxx.xx.xxx:/www/wwwroot/blog.git,master插件安裝
npm install hexo-deployer-git --save自動(dòng)部署
進(jìn)入到git倉(cāng)庫(kù)hooks目錄,并創(chuàng)建鉤子post-receive
cd /www/wwwroot/blog.git/hooks touch post-receive vim post-receive輸入下面腳本:
#!/bin/bash -l GIT_REPO=/www/wwwroot/blog.git TMP_GIT_CLONE=/www/wwwroot/tmp/blog PUBLIC_WWW=/www/wwwroot/blog rm -rf ${TMP_GIT_CLONE} mkdir ${TMP_GIT_CLONE} git clone $GIT_REPO $TMP_GIT_CLONE rm -rf ${PUBLIC_WWW}/* cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}更改權(quán)限
chmod +x post-receive chmod 777 -R /www/wwwroot/blog chmod 777 -R /www/wwwroot/tmp/blog最后部署
$ hexo g -d總結(jié)
- 上一篇: WebSocket入门
- 下一篇: .ASP NET Core中缓存问题案例