mirror of
https://github.com/Dichgrem/Blog.git
synced 2025-02-23 14:08:37 -05:00
178 lines
8.4 KiB
HTML
178 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<title>Dich'blog</title>
|
||
|
||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
|
||
<meta name="robots" content="noodp"/>
|
||
|
||
<link rel="stylesheet" href="https://blog.dich.ink/style.css">
|
||
<link rel="stylesheet" href="https://blog.dich.ink/color/blue.css">
|
||
|
||
<link rel="stylesheet" href="https://blog.dich.ink/color/background_dark.css">
|
||
|
||
<link rel="stylesheet" href="https://blog.dich.ink/font-hack-subset.css">
|
||
|
||
<meta name="description" content="">
|
||
|
||
<meta property="og:description" content="">
|
||
<meta property="og:title" content="Dich'blog">
|
||
<meta property="og:type" content="article">
|
||
<meta property="og:url" content="https://blog.dich.ink/zola-blog/">
|
||
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:description" content="">
|
||
<meta name="twitter:title" content="Dich'blog">
|
||
<meta property="twitter:domain" content="blog.dich.ink">
|
||
<meta property="twitter:url" content="https://blog.dich.ink/zola-blog/">
|
||
|
||
<link rel="alternate" type="application/atom+xml" title="Dich'blog Atom Feed" href="https://blog.dich.ink/atom.xml" />
|
||
|
||
</head>
|
||
|
||
<body class="">
|
||
<div class="container">
|
||
|
||
<header class="header">
|
||
<div class="header__inner">
|
||
<div class="header__logo">
|
||
|
||
<a href="https://blog.dich.ink" style="text-decoration: none;">
|
||
<div class="logo">
|
||
|
||
Dich'blog
|
||
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<nav class="menu">
|
||
<ul class="menu__inner">
|
||
<li class="active"><a href="https://blog.dich.ink">blog</a></li>
|
||
|
||
<li><a href="https://blog.dich.ink/tags">tags</a></li>
|
||
|
||
<li><a href="https://blog.dich.ink/archive">archive</a></li>
|
||
|
||
<li><a href="https://blog.dich.ink/about">about me</a></li>
|
||
|
||
<li><a href="https://blog.dich.ink/links">links</a></li>
|
||
|
||
<li><a href="https://blog.dich.ink/search">search</a></li>
|
||
|
||
<li><a href="https://github.com/Dichgrem" target="_blank" rel="noopener noreferrer">github</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
|
||
|
||
</header>
|
||
|
||
|
||
<div class="content">
|
||
|
||
<div class="post">
|
||
|
||
<h1 class="post-title"><a href="https://blog.dich.ink/zola-blog/">乱七八糟:个人博客搭建</a></h1>
|
||
<div class="post-meta-inline">
|
||
|
||
<span class="post-date">
|
||
2023-10-12
|
||
</span>
|
||
|
||
</div>
|
||
|
||
|
||
<span class="post-tags-inline">
|
||
:: tags:
|
||
<a class="post-tag" href="https://blog.dich.ink/tags/luan-qi-ba-zao/">#乱七八糟</a></span>
|
||
|
||
|
||
<div class="post-content">
|
||
<p>前言 个人博客的搭建有诸多框架的选择。本文以Zola框架为例，介绍如何部署该静态站点，并将其托管到Paas平台上。</p>
|
||
<span id="continue-reading"></span><h2 id="qian-qing-hui-gu">前情回顾</h2>
|
||
<p>在互联网冲浪的过程中，我们常常看到许多独立站点，有各种各样的主题样式；这些站点见证了互联网的发展历史。从最初的手工编写HTML页面，到后来的内容管理系统（CMS）如WordPress的兴起，再到如今流行的静态网站生成器（SSG），如Hugo，Hexo，Zola等等。</p>
|
||
<p>如今，静态网站生成器以其简单易用和高效性而备受青睐。其工作原理是在本地计算机上生成整个网站的HTML文件，然后将这些静态文件上传到服务器，这样用户访问网站时就可以直接从服务器上获取到HTML文件，而无需动态生成页面。这种方式不仅能够提高网站的访问速度，还可以减轻服务器的负载压力。</p>
|
||
<p>通过Hugo和Hexo等静态框架，个人用户和开发者可以轻松地创建出具有各种主题和样式的独立站点。这些框架提供了丰富的主题和插件库，用户可以根据自己的需求选择合适的主题，并通过简单的配置和定制来创建一个符合自己风格的网站。同时，这些框架还支持Markdown等标记语言，使得用户可以更加方便地编写和管理网站内容。</p>
|
||
<h2 id="jing-yu-dong">静与动</h2>
|
||
<p>博客的搭建涉及框架的选择。一般而言，有静态网页与动态网页的区别。</p>
|
||
<p>静态网页是提前在服务器上创建好的HTML文件。当用户访问时，服务器将这些文件直接发送给浏览器，浏览器解析并呈现页面内容。
|
||
这意味着每个用户访问相同的静态网页时，看到的内容都是一样的，不会根据用户的操作或者输入而改变。其优点在于响应速度较快，对服务器压力较小，可缓存性强，提高页面加载速度。</p>
|
||
<p>而动态网页的内容是在用户请求时才动态生成的。当用户访问动态网页时，服务器根据用户的请求和其他条件（例如数据库中的数据）生成HTML文件，然后发送给浏览器。
|
||
优点在于无需多种配置，易于部署和写作。但性能消耗较高，同时响应速度可能较慢。以作者之前的Halo博客为例，其在VPS上部署后在复杂主题的加载上比较缓慢。</p>
|
||
<h2 id="gou-jian-guo-cheng">构建过程</h2>
|
||
<ul>
|
||
<li>安装Zola到一个文件夹，并为其命名；</li>
|
||
<li>选择主题（theme），将下载好的主题与Zola同名文件夹合并；</li>
|
||
<li>运行zola build和zola serve,在本机浏览器127.0.0.1：1111上查看站点；</li>
|
||
<li>使用notion,obsdian,bluestone等软件写markdown格式的文章；</li>
|
||
<li>保存文章到content文件夹中；</li>
|
||
<li>随后再次运行运行zola build和zola serve，生成public文件夹；</li>
|
||
<li>新建一个Github仓库，用Git连接并push上去；</li>
|
||
<li>在Vercel/Fleek等平台将仓库部署并设置域名。</li>
|
||
</ul>
|
||
<h2 id="hou-ji">后记</h2>
|
||
<p>通过简单的步骤，我们已经快速地创建一个具有自定义主题和样式的独立站点，并将其发布到互联网上供他人访问。而在这期间，各种工具链的完善和前端基本原理了解也是收获的一部分。</p>
|
||
<h2 id="can-kao">参考</h2>
|
||
<ul>
|
||
<li><a href="https://www.getzola.org/documentation/getting-started/overview/">zola官方文档</a></li>
|
||
<li><a href="https://github.com/pawroman/zola-theme-terminimal">zoal-terminimal主题</a></li>
|
||
<li><a href="https://github.com/aaranxu/chinese-copywriting-guidelines">中文排版指南</a></li>
|
||
<li><a href="https://atpx.com/blog/improving-online-reading-experience/">如何提高用户网页阅读体验</a></li>
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="pagination">
|
||
<div class="pagination__title">
|
||
<span class="pagination__title-h">Thanks for reading! Read other posts?</span>
|
||
<hr />
|
||
</div>
|
||
<div class="pagination__buttons">
|
||
<span class="button previous">
|
||
<a href="https://blog.dich.ink/mechrev-keyboard/">
|
||
<span class="button__icon">←</span>
|
||
<span class="button__text">乱七八糟:机械革命键盘失灵拯救记</span>
|
||
</a>
|
||
</span>
|
||
|
||
|
||
<span class="button next">
|
||
<a href="https://blog.dich.ink/junk-cleanup/">
|
||
<span class="button__text">乱七八糟:垃圾清理的艺术</span>
|
||
<span class="button__icon">→</span>
|
||
</a>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<footer class="footer">
|
||
<div class="footer__inner">
|
||
<div class="copyright">
|
||
<span>©
|
||
2024
|
||
Dichgrem</span>
|
||
<span class="copyright-theme">
|
||
<span class="copyright-theme-sep">:: </span>
|
||
Theme: <a href="https://github.com/pawroman/zola-theme-terminimal/">Terminimal</a> by pawroman
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
</div>
|
||
</body>
|
||
|
||
</html> |