Snackbs's Blog

Hugo博客搭建日记 #1 - 初步搭建并引入Stack主题

Fri, 29 Nov 2024 19:01:10 +0800

Step 01 - 搭建环境准备

在一切的一切开始之前，你得先需要准备好搭建所需的环境，这样你才可以搭建你的Blog

1.1 下载 Hugo

前往 [Hugo Github Releases]选择最新发行版下载，下载完成后进行解压操作即可

GitHub的访问取决于你当地的网络情况，会有很大概率连接不上，请确保你具备魔法上网的能力，当然，这里也提供了Hugo的下载链接[版本为 v0.139.2 ，可自行按需下载]

点此跳转Onedrive下载
Windows下载的版本为：hugo_extended_xxxx_windows_amd64.zip

Step 02 - 搭建博客

2.1 创建博客

在一个你心仪的位置新建一个文件夹并将解压出来的hugo.exe移动至此文件夹，随后在该文件夹的地址栏输入cmd后按下Enter键唤起命令指示符
在弹出的命令指示符窗口中输入hugo new site xxx(文件夹名字)创建你的hugo博客文件夹
创建完成后输入命令cd xxx(建立的文件夹名称)切换目录，并将**hugo.exe**复制至该文件夹下

Hello Word

Mon, 25 Nov 2024 08:52:33 +0800

Hello Word

此文章为Snackbs’s Blog建立后的第一篇纪念文章，它将永久保存，直至很久很久~~~
This article is the first commemorative post after the establishment of Snackbs’s Blog. It will be permanently preserved, until a very long time~~~

鸣谢

Snackbs ————— 全部搭建工作
Hugo静态站点生成器 ——- 提供了搭建底层
由Jimmy设计的Stack主题 — 提供了blog的主题

Blog所使用插件

Aplayer ————– 使得blog可以播放音乐！
Live2d-widget ——– 使得blog有了一只可爱的看板娘！
[待后续更新]………………

Blog搭建教程来源

BiliBili by Letere-莱特雷–非常感谢提供了搭建教程
主页：https://letere-gzj.github.io/hugo-stack/
bilibili: https://space.bilibili.com/402971365

分类&标签

Tue, 28 May 2019 00:00:00 +0000

更新日志

Tue, 28 May 2019 00:00:00 +0000

0.0.5 - New feature support

**snackbs 发布于 26.04.07 00.36.56 v0.0.5

优化：自动构建功能将使用node.js 20更新至node.js 24
优化：优化更新日志页面呈现内容
修复：版权时间仍为©2024-2025问题

0.0.4 - Major Update!

**snackbs 发布于 24.11.29 18:40:52 v0.0.4

新功能：文章/总字数统计 网站访问量统计(#3)
优化：页脚行间距缩短/美观
修复：站点运行时间所占行间距过大问题

0.0.3-1 - Some Fixes And New Features!

**snackbs 发布于 24.11.28 14:23:04 v0.0.3-1

修复：网页右下角Live2D模型不显示问题
删除：页面底部页脚部分内容
新功能：页脚增加站点运行时间、云存储服务提供商及备案信息[瞎编的]

0.0.3 - More Optimize For Two!

**snackbs 发布于 24.11.26 20:54:43 v0.0.3

一些调整： 主页布局间距调整
一些功能性添加： 首页欢迎板块 添加语法高级键盘模式语法示例<kbd>CTRL</kbd> + <kbd>C</kbd>预览： CTRL + C 显示语言和复制按钮[下方代码块实示例]

//This is a test code block.
const highlights = document.querySelectorAll('.article-content div.highlight');
        const copyText = `拷贝`,
            copiedText = `已拷贝!`;

        highlights.forEach(highlight => {
            const copyButton = document.createElement('button');
            copyButton.innerHTML = copyText;
            copyButton.classList.add('copyCodeButton');
            highlight.appendChild(copyButton);

            const codeBlock = highlight.querySelector('code[data-lang]');
            const lang = codeBlock.getAttribute('data-lang');
            if (!codeBlock) return;

            copyButton.addEventListener('click', () => {
                navigator.clipboard.writeText(codeBlock.textContent)
                    .then(() => {
                        copyButton.textContent = copiedText;

                        setTimeout(() => {
                            copyButton.textContent = copyText;
                        }, 1000);
                    })
                    .catch(err => {
                        alert(err)
                        console.log('Something went wrong', err);
                    });
            });

            // Add language code button
            const languageButton = document.createElement('button');
            languageButton.innerHTML = lang.toUpperCase()+'&nbsp;&nbsp;';
            languageButton.classList.add('languageCodeButton');
            
            highlight.appendChild(languageButton);
        });

        new StackColorScheme(document.getElementById('dark-mode-toggle'));

一些动画效果实现： 首页欢迎板块emoji实现摆动效果,欢迎文字实现字符跳动动画

0.0.2 - More Optimize!

**snackbs 发布于 24.11.26 19:46:58 v0.0.2

增加了 页面加载进度条 [ 页面加载进度更加明显了！]
优化了 滚动条 选中文本 的样式
增加了主页右侧 搜索菜单 归档 标签云 的动画 [ 动画的加入使得界面交互更加人性化了！]

0.0.1 - Tag&Chagngelog

**snackbs 发布于 24.11.26 14:15:53 v0.0.1

新增 分类&标签 以及 更新日志 界面！！！

0.0.0 - New!

**snackbs 发布于 24.11.25 08:00:00 v0.0.0

Snackbs’s Blog 正式建立！！！

归档

Tue, 28 May 2019 00:00:00 +0000

搜索

Mon, 01 Jan 0001 00:00:00 +0000

友链

Mon, 01 Jan 0001 00:00:00 +0000