写之前吐个槽,连续的熬夜加酗酒,要跪。。。睡前写个hexo相关的教程,基于hexo如何撰写和发布一篇博客。主要分为两步,(1) 掌握markdown语法和git相关指令; (2) 利用hexo命令初始和编译文章。

Markdown语法和git相关指令

Markdown的基本语法可以参考这篇文章,在博客中主要会用到三种语法结构,

  • 标题控制 用#,#号数量越多,标题级别越低;
  • 超链接: 形如[name](address);
  • 图像: 形如![name](address) 注意感叹号。

而git相关的指令,用于上传图片,作为图床。主要指令有,

  • git add xxx : 添加一个需要push的文件;
  • git commit -m “xxx”: 给这次push添加commitp;
  • git push: 将commit的文件推送到git仓库中。

利用Hexo命令初始、编译和发布文章

Hexo 的安装和配置参考这篇文章,这里只介绍新文章的生成过程。

  1. 新建一篇名为xxx的文章,此时在blog/source/_posts路径下会生成名为’xxx.md’的文件

    1
    2
    $ cd blog
    $ hexo new "xxx"
  2. 编写文章

    1
    2
    $ cd ./source/_posts
    $ vim xxx.md

或者可以利用markdown相关的编辑器,如haroopad,这是一款非常好用的编辑器。

  1. 编译、预览和发布文章
    利用如下命令可以编译、预览和发布文章,
    1
    2
    3
    $ hexo g # 编译
    $ hexo s # 预览,此时在浏览器输入 localhost:4000
    $ hexo d # 发布文章到github

Enjoy it~~

Comment and share

写之前吐槽一下百度的站长平台,添加新站搜索必须要备案,然后就放弃了。。。转到谷歌的Google Analytics, GA,可以统计网站的访问数据。搜索了一下,多数hexo模板都嵌入了google analytics相关的ejs,添加起来还是比较方便的。

下面以我用的模板tranquilpeak为例,介绍一下添加的步骤,

1. 注册GA账户并添加网站

首先利用谷歌帐号登录Google Analytics,设置关联,而后添加网站信息,如下图所示,

2. 获取UA

添加好网站信息以后,GA会提供一个名为UA的ID (例如 UA-xxxxxx-x) 以及用于添加进网站页面的gtga.js段代码,如下

1
2
3
4
5
6
7
8
9
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxx-x"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-xxxxx-x');
</script>

3. 在模板中添加GA支持

对于tranquilpeak模板,配置google-analytics是比较简单的,只需要修改theme/tranquilpeal/_config.yml文件中的google-analytics-id部分,如下所示,

1
2
# Your Google analystics web property ID : UA-XXXXX-X
google_analytics_id: UA-xxxx-x

同样的,相应的google-analytics.ejs文件可以在theme/tranquilpeak/layout/_partial中找到, 其代码如下所示,

1
2
3
4
5
6
7
8
9
10
11
<% if (theme.google_analytics_id) { %>
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '<%= theme.google_analytics_id %>', 'auto');
ga('send', 'pageview');
</script>
<% } %>

其中的theme.google_analytics_id便对应刚刚我们添加的UA-xxxx-x,该文件不需要修改。当然也可以尝试将GA提供的基于gtag.js代码替换到google-analysis.ejs`中,感兴趣可以试试看。

4. 编译并部署

最后,利用hexo g重新编译相关文件,在每一个.html页面中加入GA相关的内容,谷歌的分析服务便可以发挥作用。

Reference

[1] hexo-theme-tranquilpeak
[2] Hexo搭建Github静态博客

Comment and share

  • page 1 of 1
Author's picture

Jason Ma

We are in the same story.


Astronomer? Software engineer


Shanghai