mirror of
https://github.com/Dichgrem/Blog.git
synced 2025-07-31 17:09:30 -04:00
320 lines
14 KiB
HTML
320 lines
14 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.bid/style.css">
|
||
<link rel="stylesheet" href="https://blog.dich.bid/color/blue.css">
|
||
|
||
<link rel="stylesheet" href="https://blog.dich.bid/color/background_dark.css">
|
||
|
||
<link rel="stylesheet" href="https://blog.dich.bid/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.bid/about-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.bid">
|
||
<meta property="twitter:url" content="https://blog.dich.bid/about-blog/">
|
||
|
||
<link rel="alternate" type="application/atom+xml" title="Dich'blog Atom Feed" href="https://blog.dich.bid/atom.xml" />
|
||
|
||
|
||
<link rel="icon" type="image/png" href=/dich.webp />
|
||
|
||
<!-- ✅ Added center alignment styles -->
|
||
<style>
|
||
.footer {
|
||
text-align: center;
|
||
padding: 1rem 0;
|
||
}
|
||
|
||
.footer__inner {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.copyright {
|
||
text-align: center;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="">
|
||
<div class="container">
|
||
|
||
<header class="header">
|
||
<div class="header__inner">
|
||
<div class="header__logo">
|
||
|
||
<a href="https://blog.dich.bid" style="text-decoration: none;">
|
||
<div class="logo">
|
||
|
||
Dich'blog
|
||
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<nav class="menu">
|
||
<ul class="menu__inner">
|
||
<li><a href="https://blog.dich.bid">blog</a></li>
|
||
|
||
<li><a href="https://blog.dich.bid/archive">archive</a></li>
|
||
|
||
<li><a href="https://blog.dich.bid/tags">tags</a></li>
|
||
|
||
<li><a href="https://blog.dich.bid/weekly">weekly</a></li>
|
||
|
||
<li><a href="https://blog.dich.bid/search">search</a></li>
|
||
|
||
<li class="active"><a href="https://blog.dich.bid/about">about me</a></li>
|
||
|
||
<li><a href="https://blog.dich.bid/links">links</a></li>
|
||
|
||
<li><a href="https://blog.dich.bid/atom.xml">rss</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.bid/about-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.bid/tags/luan-qi-ba-zao/">#乱七八糟</a></span>
|
||
|
||
|
||
<div class="post-content">
|
||
<p>前言 个人博客的搭建具有许多的方案可以选择，本文介绍如何快速部署一个博客，并将其发布到公网。</p>
|
||
<span id="continue-reading"></span><h2 id="qian-qing-hui-gu">前情回顾</h2>
|
||
<p>在互联网冲浪的过程中，我们常常看到许多独立站点，他们往往是个人博客，有各种各样的主题样式；这些站点见证了互联网的发展历史。从最初的手工编写HTML页面，到后来的内容管理系统（CMS）如WordPress的兴起，再到如今流行的静态网站生成器（SSG），如Hugo，Hexo，Zola等等。</p>
|
||
<p>个人博客的定义是什么？私以为是<code>域名+站点+原创内容</code>三要素组成。当然，最重要的原创内容往往被忽视...</p>
|
||
<ul>
|
||
<li>域名可以在<a href="https://www.dynadot.com/">Dynadot</a>等平台购买，也可以申请如<code>eu.org</code>或<code>us.kg</code>等免费域名，目的是为了好记；</li>
|
||
<li>站点可以在自己的服务器上使用动态的<code>WordPress</code>或者<code>Halo</code>来一键创建，也可以使用<code>静态框架</code>部署在PAAS平台上；</li>
|
||
</ul>
|
||
<p>因此，整体成本应该是非常低的。</p>
|
||
<h2 id="shi-yong-halokuai-su-da-jian-bo-ke">使用Halo快速搭建博客</h2>
|
||
<ul>
|
||
<li>首先你需要有一台自己的云服务器，建议在1核1G以上配置，并安装Debian系统；</li>
|
||
<li>随后我们安装1panel，执行以下命令一键安装：</li>
|
||
</ul>
|
||
<pre style="background-color:#151515;color:#e8e8d3;"><code><span>curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && sudo bash quick_start.sh
|
||
</span></code></pre>
|
||
<blockquote>
|
||
<p>1panel依赖于docker，如果实现没有安装docker，脚本会帮你安装。</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li>
|
||
<p>安装过程中选择好端口，随后即可使用<code>http:<ip>:<port>:<安全入口></code>进入登录界面，并使用默认随机生成的密码进入面板。</p>
|
||
</li>
|
||
<li>
|
||
<p>进入之后我们可以看到里面有应用商店，在其中安装<code>OpenResty</code>与<code>Halo</code>与<code>mysql</code>，安装完毕后打开外部访问地址<code>http://ip:8090</code>，即可进入halo的后台，在其中写入文章并发布。</p>
|
||
</li>
|
||
</ul>
|
||
<p>但我们不能使用不安全的HTTP以及IP来访问博客；因此，我们需要一个域名指向我们的博客，例如本文的<code>blog.dich.bid</code>;可以在在<a href="https://www.dynadot.com/">Dynadot</a>等平台购买域名，并托管到<a href="https://askai.glarity.app/zh-CN/search/%E5%A6%82%E4%BD%95%E5%B0%86Dynadot%E6%B3%A8%E5%86%8C%E7%9A%84%E5%9F%9F%E5%90%8D%E8%BD%AC%E7%A7%BB%E5%88%B0Cloudflare">Cloudflare</a>。</p>
|
||
<ul>
|
||
<li>
|
||
<p>随后可以在1panel的<code>网站</code>中创建一个反向代理，代理地址即为http://ip:8090，主域名为刚刚注册的域名前加blog或其他，如<code>blog.xxx.com</code></p>
|
||
</li>
|
||
<li>
|
||
<p>创建完成后我们还需要配置TLS证书，在网站-HTTPS中添加证书，可以选择<a href="https://bkssl.com/ssl/selfsign">自签名证书</a>正式或者通过Acme申请免费的<code>Let's Encrypt</code>证书。</p>
|
||
</li>
|
||
<li>
|
||
<p>配置完成后在Cloudflare的DNS解析界面创建一个A记录，将你的<code>blog.xxx.com解析到你的服务器的IP</code>；</p>
|
||
</li>
|
||
<li>
|
||
<p>大功告成！现在你应该可以通过HTTPS域名访问自己的博客！</p>
|
||
</li>
|
||
</ul>
|
||
<h2 id="shi-yong-hugokuang-jia-gou-jian-bo-ke">使用Hugo框架构建博客</h2>
|
||
<p>首先明确你需要的架构，一般有两种选择：</p>
|
||
<ul>
|
||
<li>使用现有的架构,包括Hugo,Hexo，Zola,Astro等等；</li>
|
||
<li>或者从头写一个框架，需要HTML/CSS/JS等知识；</li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>可以在<a href="https://jamstackthemes.dev/">这个网站</a>上面查看常见的框架与主题的显示效果</p>
|
||
</blockquote>
|
||
<ol>
|
||
<li><strong>安装Hugo</strong>:选择好你的框架与主题后（这里以hugo为例子），随后安装hugo以及对应的依赖：</li>
|
||
</ol>
|
||
<ul>
|
||
<li><strong>Windows</strong></li>
|
||
</ul>
|
||
<pre style="background-color:#151515;color:#e8e8d3;"><code><span># 打开以管理员模式运行的PowerShell,输入命令安装 Hugo Extended：
|
||
</span><span>winget install Hugo.Hugo.Extended
|
||
</span></code></pre>
|
||
<ul>
|
||
<li><strong>Arch linux</strong></li>
|
||
</ul>
|
||
<pre style="background-color:#151515;color:#e8e8d3;"><code><span>paru -S hugo
|
||
</span></code></pre>
|
||
<ul>
|
||
<li><strong>检查版本</strong></li>
|
||
</ul>
|
||
<pre style="background-color:#151515;color:#e8e8d3;"><code><span>hugo version
|
||
</span></code></pre>
|
||
<ol start="2">
|
||
<li><strong>创建新的 Hugo 站点</strong>：选择一个文件夹打开命令行，执行：</li>
|
||
</ol>
|
||
<pre style="background-color:#151515;color:#e8e8d3;"><code><span>hugo new site myblog
|
||
</span></code></pre>
|
||
<p>该命令会在<code>myblog</code>文件夹下生成hugo的基础目录。</p>
|
||
<ol start="3">
|
||
<li><strong>安装主题</strong>，这里以<a href="https://jamstackthemes.dev/theme/hugo-blog-awesome/">hugo-blog-awesome</a>主题为例：</li>
|
||
</ol>
|
||
<pre style="background-color:#151515;color:#e8e8d3;"><code><span>cd myblog
|
||
</span><span>git clone https://github.com/hugo-sid/hugo-blog-awesome.git themes/hugo-blog-awesome
|
||
</span></code></pre>
|
||
<p>并在<code>hugo.toml</code>顶层添加：</p>
|
||
<pre style="background-color:#151515;color:#e8e8d3;"><code><span>theme = "hugo-blog-awesome"
|
||
</span></code></pre>
|
||
<p>这样 Hugo 在构建时会从 themes/ 目录加载主题文件。后续可使用<code>git pull</code>获取主题更新。</p>
|
||
<blockquote>
|
||
<p>你也可以直接用theme中的文件夹替换掉项目根目录下的同名文件夹，并再次修改。</p>
|
||
</blockquote>
|
||
<ol start="4">
|
||
<li><strong>写入文章</strong>：使用 Hugo 提供的命令创建新文章：</li>
|
||
</ol>
|
||
<pre style="background-color:#151515;color:#e8e8d3;"><code><span>hugo new posts/hello-world.md
|
||
</span></code></pre>
|
||
<p>该命令会在<code>content/posts/</code>下生成 Markdown 文件，打开后修改<code>title、date、tags</code>等前缀然后撰写 Markdown 正文, Markdown 编辑器参考<a href="https://blog.dich.bid/about-markdown/">前文</a>。</p>
|
||
<blockquote>
|
||
<p>注意md文章头部和正文之间得使用<code><!-- more --></code>隔断</p>
|
||
</blockquote>
|
||
<ol start="5">
|
||
<li><strong>本地测试</strong>：在项目根目录运行：</li>
|
||
</ol>
|
||
<pre style="background-color:#151515;color:#e8e8d3;"><code><span>hugo server -D
|
||
</span></code></pre>
|
||
<p>然后在浏览器访问<code>http://localhost:1313</code>即可实时预览并查看更新效果。</p>
|
||
<ol start="6">
|
||
<li>
|
||
<p><strong>上传到GitHub</strong>：新建一个Github仓库，用Git连接并将Hugo项目的文件夹push上去；</p>
|
||
</li>
|
||
<li>
|
||
<p><strong>使用PAAS平台部署</strong>：随后使用<a href="https://vercel.com">Vercel</a>/<a href="https://www.netlify.com/">Netlify</a>等平台读取GitHub仓库并部署Hugo博客项目，并设置指向自己的域名，即<code>设置一条CNAME记录</code>。部署的时候可以让<code>平台command运行部署</code>也可以<code>本地build之后直接上传public文件夹</code>并在平台中指定。</p>
|
||
</li>
|
||
</ol>
|
||
<blockquote>
|
||
<p>当然，也可以使用GitHub Pages部署，详见<a href="https://docs.github.com/zh/pages/quickstart?library=true">官方文档</a></p>
|
||
</blockquote>
|
||
<h3 id="ke-xuan-ding-zhi-xiang">可选定制项</h3>
|
||
<p><strong>你想要的显示效果?</strong></p>
|
||
<ul>
|
||
<li>风格，包括命令行风格，极简风格，MD3风格等等;</li>
|
||
<li>布局，是响应式还是传统布局？</li>
|
||
</ul>
|
||
<p><strong>你需要那些功能?</strong></p>
|
||
<ul>
|
||
<li>黑暗/白天模式切换;</li>
|
||
<li>高斯模糊？动态取色？</li>
|
||
<li>PPT般的动效？</li>
|
||
<li>访问人数和运行天数统计？</li>
|
||
<li>Tag分类和时间排序？</li>
|
||
<li>搜索功能和RSS？</li>
|
||
</ul>
|
||
<p><strong>需要处理哪些外部依赖?</strong></p>
|
||
<ul>
|
||
<li>域名和paas平台？</li>
|
||
<li>图床还是直接嵌入图片？</li>
|
||
<li>是否需要自动编译？</li>
|
||
<li>是否需要多平台发布？</li>
|
||
<li>是否需要加密特定文章？</li>
|
||
</ul>
|
||
<p><strong>以上的功能和需求是否对SEO和界面相应时间造成影响？</strong></p>
|
||
<h2 id="link">🔗</h2>
|
||
<ul>
|
||
<li><a href="https://gohugo.io/documentation/">Hugo官方文档</a></li>
|
||
<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>
|
||
<hr />
|
||
<p><strong>Done.</strong></p>
|
||
|
||
</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.bid/about-mechrev-keyboard/">
|
||
<span class="button__icon">←</span>
|
||
<span class="button__text">乱七八糟:机械革命键盘失灵拯救记</span>
|
||
</a>
|
||
</span>
|
||
|
||
|
||
<span class="button next">
|
||
<a href="https://blog.dich.bid/about-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>©
|
||
2025
|
||
Dichgrem</span>
|
||
<span class="copyright-theme">
|
||
<span class="copyright-theme-sep"> :: CC BY-SA 4.0 :: A friend comes from distant lands</span>
|
||
</a>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|
||
|