Wednesday, October 12, 2016

Hexo + GitHub Pages to build blog by Node.js

my github website: https://shineboy2013.github.io/

<code>O(_n_<sup>2</sup>)</code>
句末加两个空格表示换行
&ast;表示*
&times;表示乘号
<br>
---表示分隔线
<pre>有时不work,要改成div,重启,再改为pre即可


写新的blog,可以直接写,不用重启server(hexo s)但若要checkin时需要重新启动

安装:
这里https://xuanwo.org/2015/03/26/hexo-intor/解释很详细了,但有几点要补充:

1. download latest hexo,旧的版本安装失败
2. 要建GitHub page,github的subdomain要与Github的用户名一致。
3. 注意cd到hexo dir to run hexo g
4. git d有问题ssh解决不了,所以用TurquoiseGit check in

Theme:
我用的theme为https://hmybmny.com/hexo-theme-concise/
主题可以通过github下载(可以直接下载,解压,放入themes文件夹),然后修改_config.yml改theme名字即可,具体见上面link

Plugin:
npm install hexo-generator-feed --save
npm install hexo-generator-sitemap --save
npm install hexo-math --save
npm install hexo-generator-archive --save

=>atom.xml/sitemap.xml

write an article:
Software\Hexo\source\_posts写一个MD文件
HTML to markdown: https://www.browserling.com/tools/html-to-markdown
Online Markdown Editor: https://www.zybuluo.com/mdeditor

Generate files to localhost:
cd C:\Users\KK\Documents\MyFiles\Coding\Hexo Server
hexo clean
hexo g
hexo s

http://localhost:4000/

Deploy to Prod:
网站文件产生在Software\Hexo\public的文件夹,然后将其所有文件复制到public-git,这样做因为hexo clean会把.git的文件也去掉。
push public-git to https://github.com/shineboy2013/ by TurtoiseGit
同时备份到Coding\JS\Hexo\source\_posts


Markdown:
https://hexo.io/docs
http://syxiaqj.github.io/2014/02/23/write-blog-with-markdown/
how to use tags

Styling:
可以自己改主题的styling

比如更改table styling,在\Hexo\themes\hexo-theme-concise\source\css\_partial\article.styl
table{ border-collapse: collapse; width: 100%; } .highlight table{ border-collapse: collapse; width: 0% !important; }

th, td {
text-align: left;
padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
background-color: #4CAF50;
color: white;
}


比如更改tag cloud styling,在\Hexo\themes\hexo-theme-concise\source\css\_partial\sidebar.styl
覆盖inline style
   .tagcloud a {
 font-size: 20px !important;
   }

Archiving:
然后在站点的 _config.yml 中设置,例如:
index_generator:
  per_page: 5

archive_generator:
  per_page: 0
  yearly: true
  monthly: true

tag_generator:
  per_page: 10

加广告栏:
[concise]
在theme上加入自己的script:
1. 在Hexo Server\themes\hexo-theme-concise\layout\donation加入donation folder
2. 加入sidebar.ejs文件
<div style="color:blue;text-align:center;margin-bottom:10px">
    <h4>Donote me at Venmo</h4>
<img alt="" border="0" src="/images/static/Venmo_QR_Code.png" width="131" height="160" />
</div>
3. 修改Hexo Server\themes\hexo-theme-concise\layout\layout.ejs加入步骤2的script
  <%- partial('donation/sidebar') %>

[next]
2. reward and reward_settings in _config.yml
3. themes\next\source\images\static\ad.jpg
    themes\next\layout\_layout.swig
  
  <a href="mailto:metajobreferral@gmail.com?subject=Mail from Github">
   <img alt="Free mock interview" border="0" src="/images/static/ad.jpg" width="270" />
  </a>

加网站数据:
<script type="text/javascript" src="//rf.revolvermaps.com/0/0/8.js?</script>

加favicon:
[concise]
1. 在\themes\hexo-theme-concise加入favicon: /favicon.png
2. 在\themes\hexo-theme-concise\source文件夹中加入图片(路径相对于source)
[next]
themes\next\source\images\favicon-32x32-next.png (favicon in _config.yml)

How to add tags page
[next] https://theme-next.js.org/docs/theme-settings/custom-pages

加评论:
https://shineboy2013.disqus.com/admin/
hexo-theme-concise不支持disqus,所以换了nexT主题

theme_config:
  disqus:
    enable: true
    shortname: xxx
    count: true
    lazyload: false


加Search:
https://theme-next.js.org/docs/third-party-services/search-services

Bugnet, open source bug tracking system for .Net