https://jaxon.ccwu.cc/categories/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ Recent content in 技术分享 on 博客主页 Hugo zh Tue, 28 Apr 2026 08:00:00 +0800 https://jaxon.ccwu.cc/posts/hogo/ Tue, 28 Apr 2026 08:00:00 +0800 https://jaxon.ccwu.cc/posts/hogo/ <h4 id="摘要"> 摘要 <a class="heading-link" href="#%e6%91%98%e8%a6%81"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h4> <ul> <li>本地 hugo 搭建静态页面</li> <li>上传至 github 托管</li> <li>部署至 cloudflare page 或 cloudflare worker</li> <li>（可选）自定义网页域名</li> </ul> <h4 id="前置条件"> 前置条件 <a class="heading-link" href="#%e5%89%8d%e7%bd%ae%e6%9d%a1%e4%bb%b6"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h4> <ul> <li>Git</li> <li>已有 Github、Cloudflare 账号</li> <li>科学上网</li> </ul> <h4 id="一本地搭建静态页面"> 一、本地搭建静态页面 <a class="heading-link" href="#%e4%b8%80%e6%9c%ac%e5%9c%b0%e6%90%ad%e5%bb%ba%e9%9d%99%e6%80%81%e9%a1%b5%e9%9d%a2"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h4> <ol> <li>安装 hugo：winget <font style="color:rgb(0, 81, 194);">install</font> Hugo.Hugo.Extended</li> </ol> <blockquote> <p>手动安装：</p> <p><a href="https://github.com/gohugoio/hugo/releases/download/v0.157.0/hugo_extended_0.157.0_windows-amd64.zip" class="external-link" target="_blank" rel="noopener">https://github.com/gohugoio/hugo/releases/download/v0.157.0/hugo_extended_0.157.0_windows-amd64.zip</a>，解压到合适位置，把解压后的 hugo.exe 所在路径添加到环境变量 path，用 hugo version 验证</p></blockquote> <ol start="2"> <li>创建 hugo 项目：hugo new site pblog</li> <li>进入项目：cd pblog</li> <li>复制主题：git clone <a href="https://github.com/luizdepra/hugo-coder.git" class="external-link" target="_blank" rel="noopener">https://github.com/luizdepra/hugo-coder.git</a> themes/hugo-coder</li> <li>配置 hugo.toml，可以使用主题作者提供的示例</li> <li>启动本地预览：hugo server 默认在 <a href="http://localhost:1313/" class="external-link" target="_blank" rel="noopener">http://localhost:1313/</a> 查看</li> <li>删掉主题库 .git：rmdir /s /q themes\hugo-coder.git，避免影响后续推送</li> <li>运行 hugo 验证是否可以成功构建：hugo</li> </ol> <h4 id="二托管至-github"> 二、托管至 Github <a class="heading-link" href="#%e4%ba%8c%e6%89%98%e7%ae%a1%e8%87%b3-github"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h4> <ol> <li>git init</li> <li>git add .</li> <li>git commit -m &ldquo;Initial&rdquo;</li> <li>在 Github 上创建一个仓库，可以是私有仓库，设置本地项目 Git 远程地址到仓库：git remote add origin <a href="https://github.com/AlightSoulmate/hugo-demo.git" class="external-link" target="_blank" rel="noopener">https://github.com/<your-name>/<your-repo>.git</a></li> <li>git push -u origin master 或 git push -u origin main</li> <li>到仓库验证本地代码已推送</li> </ol> <h4 id="三部署至-cloudflare-pages"> 三、部署至 Cloudflare Pages <a class="heading-link" href="#%e4%b8%89%e9%83%a8%e7%bd%b2%e8%87%b3-cloudflare-pages"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h4> <ol> <li>进入 Cloudflare - 构建 - Compute - Workers 和 Pages 页面，点击创建应用程序，选择 Pages。首次使用时，需要绑定和授权 Github 账号</li> <li>在创建应用程序页面，选择要部署的项目对应仓库，选择静态框架为 hugo，快速部署，完成后使用 Cloudflare Pages 提供的默认域名访问网页</li> <li>如构建失败，可能是 Hugo 版本差异，需要指定 HUGO_VERSION 环境变量</li> </ol> <h4 id="四自定义域名"> 四、自定义域名 <a class="heading-link" href="#%e5%9b%9b%e8%87%aa%e5%ae%9a%e4%b9%89%e5%9f%9f%e5%90%8d"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h4> <ol> <li>在 Cloudflare 或阿里云等国内云服务商购买域名，（不要购买 .cn 域名）若在 Cloudflare 外购买，需要在 Cloudflare 域名页面添加域名，按照提示修改 DNS 服务器，添加 DNS 记录，为顶级域名和 www 子域名添加两个 CNAME 记录</li> <li>在 Workers 和 Pages 页面刚刚部署的项目页添加自定义域名，需要等待较长时间</li> </ol> https://jaxon.ccwu.cc/posts/hanzi-writer/ Thu, 16 Apr 2026 08:00:00 +0800 https://jaxon.ccwu.cc/posts/hanzi-writer/ <h2 id="让汉字动起来"> 让汉字动起来 <a class="heading-link" href="#%e8%ae%a9%e6%b1%89%e5%ad%97%e5%8a%a8%e8%b5%b7%e6%9d%a5"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h2> <p>这是一款用于展示汉字笔画顺序和交互式书写练习的 JavaScript 库。</p> <div style="text-align:center;margin:20px"> <input type="text" id="charInput" value="我" maxlength="1" style="padding:8px;font-size:16px;width:60px"> <button onclick="updateChar()" style="padding:8px 16px;margin-left:10px">更新</button> <button onclick="playAnimation()" style="padding:8px 16px;margin-left:10px;background:#007bff;color:#fff;border:none">播放动画</button> </div> <div id="animationContainer" style="width:300px;height:300px;margin:20px auto;border:1px solid #ddd"></div> <div id="quizContainer" style="width:300px;height:300px;margin:20px auto;border:1px solid #ddd"></div> <div style="text-align:center"> <button onclick="startQuiz()" style="padding:8px 16px">开始练习</button> <button onclick="resetQuiz()" style="padding:8px 16px;margin-left:10px">重置</button> </div> <script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.5/dist/hanzi-writer.min.js"></script> <script> let animationWriter = null; let quizWriter = null; let currentChar = '我'; let totalMistakes = 0; let correctStrokes = 0; function initWriters(char) { if (animationWriter) animationWriter.destroy(); if (quizWriter) quizWriter.destroy(); animationWriter = HanziWriter.create('animationContainer', char, { width: 280, height: 280, padding: 10, strokeColor: '#007bff', outlineColor: '#ddd', showOutline: true, }); quizWriter = HanziWriter.create('quizContainer', char, { width: 280, height: 280, padding: 10, strokeColor: '#28a745', outlineColor: '#ddd', showCharacter: false, showOutline: true, }); currentChar = char; totalMistakes = 0; correctStrokes = 0; setTimeout(() => playAnimation(), 500); } function updateChar() { const char = document.getElementById('charInput').value; if (char && char.length === 1) { initWriters(char); } else { alert('请输入一个汉字！'); } } function playAnimation() { if (animationWriter) animationWriter.animateCharacter(); } function startQuiz() { if (quizWriter) { quizWriter.quiz({ onCorrectStroke: () => correctStrokes++, onMistake: () => totalMistakes++, }); } } function resetQuiz() { if (quizWriter) { quizWriter.destroy(); initWriters(currentChar); } } window.addEventListener('load', () => initWriters('我')); </script>