周末的夜晚，可以用来折腾网站

不是一篇建站心路历程

高中在博客年代的尾巴上跟风，开始把阵地从qq空间和贴吧向博客大巴转移。过了不久博客大巴倒闭了，我回归豆瓣日记。又过了不久文字狱愈演愈烈了，于是把文章悉数打点到了wordpress.com上。去年发现除了纯粹为自己而写的、记录情绪起伏的私人日记以外，也很需要一个跟自己本职稍微挂钩、可以向外表达分享的平台。

在晚上冲浪的时候看到喜欢的设计工作室formafantasma的新网站和他们对这次网站翻新的诠释，顺藤摸瓜认识了线上杂志low tech magazine，他们既提出high tech problems、也介绍low tech solutions。网站的设计原则就是尽可能减少网站的体量，由此减少加载网站所需要消耗的能量、也减少运行网站的服务器所需要的能量。整个网站由静态生成，储存在网站运行人之一在巴塞罗那家客厅的单板计算机服务器上，服务器的电量完全由其自家阳台上的太阳能电路板供应，因此网站的上线时间和当地天气状况挂钩，在网站上也能看到服务器当前电量余量。

托其介绍，让我第一次认识到了动态网站和静态网站的区别。在虚拟产品需要庞大的耗能支撑已经是共识的今天，回归静态网页这种更加古老的技术似乎变得非常响应当下，有种文艺复兴的感觉，也让我从此对静态博客产生了极大的兴趣。

作为编程和建站的门外汉，自觉达不到搭建网站信手拈来的地步，但还是想开始上手试试，恰巧想起之前在豆瓣上看到过一位友邻发表他对于博客记录和博客平台的看法，我也没做太深入的调研，一个冲动直接在网上拉了几篇hexo教程，认准了陌生网友使用的主题模版，匆匆茫茫地搭起了这个网站的框架，把自己以前放在作品集网站上的几篇文章一股脑扔了上来。

以下是建站时参考的网友教程：
Mac下搭建基于Hexo + Github的个人博客
Hexo + Github 搭建博客（Mac篇）
当然期间遇到了很多教程没有囊括的问题，最后也一一谷歌悉数解决。

博客使用的主题是网友开发的Nlvi，虽然功能齐全，但偶尔还是希望对格式稍作改动，于是在搭起博客半年多后的昨晚，终于铆足一口劲，用我三脚猫的html和css入门知识凭着浏览器的developer tools和主题目录下关键词搜索，一点一点地抠改起细节。专业人士大约1个小时不到就可搞定的任务，我挨到凌晨五点，听着窗外清晨的鸟鸣啼叫声，终于步履蹒跚回到床上。

这篇博客刚下笔时，以为自己是本着爱分享的态度，记录下自己的建站心路历程。写着写着才发现，大家建站的心路历程都差不多，该说的已经被重复了无数遍，多说一句都算废话。此时表达欲充沛，也许其实是因为自己昨晚熬夜太久，需要留下一点文字证据，也许是我是为自己居然可以在别人的编好的程序上做出小小改动而欢欣鼓舞，由此想向世界发出一声类似于“hello world”这样快乐的嚎叫罢了。

一些链接：

Getting into Fights with Data Centres

2023 年了你为什么需要写博客

我为什么写博客

虽然昨晚做了些许改动，但还有好几项剩余其他需要折腾内容，不知道我何时才能攒起精力和时间一一解决，如果有路过网友可以指点一二，真的感激不尽：
1. 虽然有按照配置文件里的要求填写网站meta信息，但是不知道为什么就是没有被搜索引擎准确抓取。同时也很希望通过设置，在把网站分享到社交媒体时可以被平台识别抓取生成每篇帖子的内容预览分享卡片。
2. 之前受人提醒才知道，欧盟颁布的一般数据保护条例”（“GDPR”）中规定，如果网站访问会留下或者收集任何用户数据，都必须首先经得用户同意。虽然我觉得自己这个一周访问量不超过十个活人的小小博客网站不会碍着谁，但还是可以做个良民，看看以后怎么添加一个隐私声明（因为博客有配置google analytics）。
3. Header的underline视效去掉。
4. 文章导航格式调整。

代码笔记

给记忆备份一下

博客

Meta

设置网站的基本meta信息，比如网站名、副标题、icon、网站描述、内容作者等，但同时也通过设置使每篇文章的描述以及文章标题也在meta信息中出现。

在主题head文件的meta区域添加以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

{% if page.keywords %}
<meta name="keywords" content="{{ page.keywords }},{{ config.keywords }}" />
{% else %}
<meta name="keywords" content="{{ config.keywords }}" />
{% endif %}

{% if page.description %}
<meta name="description" content="{{ page.description }}" />
{% else %}
<meta name="description" content="{{ config.description }}" />
{% endif %}

{% if page.thumbnail %}
<meta name="thumbnail" content="{{ page.thumbnail }}" />
{% else %}
<meta name="thumbnail" content="https://xijingxu.blog/image/favicon.png" />
{% endif %}

{% if page.title %}
<meta name="title" content="{{ page.title }} | {{ config.title }}" />
{% else %}
<meta name="title" content="{{ config.title }}" />
{% endif %}

{% if config.subtitle %}
<meta name="subtitle" content="{{ config.subtitle }}">
{% endif %}

{% if config.author %}
<meta name="author" content="{{ config.author }}">
{% endif %}

为不同的社交媒体分享卡设置抓取网站meta信息的接口。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="{{ config.title }}" />
<meta name="twitter:creator" content="{{ author }}">
{% if page.title %}
<meta name="twitter:title" content="{{ page.title }} | {{ config.title }}" />
{% else %}
<meta name="twitter:title" content="{{ config.title }}" />
{% endif %}
{% if page.description %}
<meta name="twitter:description" content="{{ page.description }}" />
{% else %}
<meta name="twitter:description" content="{{ config.description }}" />
{% endif %}
{% if page.thumbnail %}
<meta name="twitter:image" content="{{ page.thumbnail }}" />
{% else %}
<meta name="twitter:image" content="https://xijingxu.blog/image/favicon.png" />
{% endif %}

<meta property="og:site_name" content="{{ config.title }}">
{% if page.title %}
<meta property="og:title" content="{{ page.title }} | {{ config.title }}" />
{% else %}
<meta property="og:title" content="{{ config.title }}" />
{% endif %}
<meta property="og:type" content="website" />
<meta property="og:locale" content="{{ config.language }}" />
{% if page.description %}
<meta property="og:description" content="{{ page.description }}" />
{% else %}
<meta property="og:description" content="{{ config.description }}" />
{% endif %}
{% if page.thumbnail %}
<meta property="og:image" content="{{ page.thumbnail }}" />
{% else %}
<meta property="og:image" content="https://xijingxu.blog/image/favicon.png" />
{% endif %}

Horizontal Scroll

/themes/Nlvi/source/style/style.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

.scroll-wrapper {
  position: relative;
  display: flex;
  align-items: left;
  width: 100%;
}

.scroll-container {
  background-color: #0000;
  overflow: auto;
  white-space: nowrap;
  padding: 0;
  flex: 1;
}

.scroll-container img {
  padding: 0.1rem;
  max-height: 520px;
  object-fit: scale-down;
  display: inline-block;
}

/* Media query for middle screens */
@media (max-width: 900px) {
  .scroll-container img {
    max-height: 350px;
    min-width: 150px;
  }

}

/* Media query for small screens */
@media (max-width: 700px) {
  .scroll-container img {
    max-height: 250px;
    min-width: 150px;
  }

}

/* Media query for very small screens */
@media (max-width: 400px) {
  .scroll-container img {
    max-height: 200px;
    min-width: 100px;
  }
}

1
2
3
4
5
6
7

<div class="scroll-wrapper">
<div class="scroll-container">
  <img src=""> 
  <img src=""> 
  <img src=""> 
</div> 
</div> 

单篇博文密码访问

Front-matter

1
2
3

password: xxx
abstract: 输入密码显示文章
wrong_pass_message: 密码错误

待修改/资料参考

图片轮播

https://mantyke.icu/posts/2021/cf2cf0fb/

umami

https://sspai.com/post/68721

https://mantyke.icu/posts/2021/umami-build/

waline

https://naturaleki.one/post/loadinghugo%E8%A3%85%E4%BF%AE%E6%97%A5%E5%BF%9702/

个站

个人网站的customised代码也放在这里好了。

Full Page Click

1
2
3
4

<a href="http://xijingxu.com/info">
    <div class="fullPageLink">
    </div>
</a>

1
2
3
4
5
6
7

    .fullPageLink{
    position: absolute;
    display: block;
    z-index: 100;
    width: 100%;
    height: 100%;
}

Screen Size

1

<span class="only-desktop">text</span>

1
2
3
4
5
6
7
8
9
10
11

@media (max-width: 992px) {
  .only-desktop{
    display: none;
}
}

@media (min-width: 993px) {
.only-mobil{
display:none;
}
}