mmckinnon/hugo-build
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deploying to gh-pages from @ geekifan/chirpy-starter@244d60af9a 🚀

Browse Source
This commit is contained in:
geekifan
2025-06-05 08:17:43 +00:00
commit 1855c0645f
235 changed files with 8087 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
post/2019-08-09-getting-started/index.html Normal file
View File

@ -0,0 +1,78 @@
<!doctype html><head><link rel=stylesheet href=https://geekifan.github.io/chirpy-starter/css/main.min.6135c0700b2b81f4338a5c119b7a78b2bd20208c6f27ae64a19d0ef65cba906c.css></head><html lang=en><head><meta charset=utf-8><meta name=theme-color media="(prefers-color-scheme: light)" content="#f7f7f7"><meta name=theme-color media="(prefers-color-scheme: dark)" content="#1b1b1e"><meta name=mobile-web-app-capable content="yes"><meta name=apple-mobile-web-app-status-bar-style content="black-translucent"><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,shrink-to-fit=no,viewport-fit=cover"><meta property="og:url" content="https://geekifan.github.io/chirpy-starter/post/2019-08-09-getting-started/"><meta property="og:site_name" content="Chirpy"><meta property="og:title" content="Getting Started"><meta property="og:description" content="Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server."><meta property="og:locale" content="en"><meta property="og:type" content="article"><meta property="article:section" content="post"><meta property="article:published_time" content="2019-08-09T20:55:00+08:00"><meta property="article:modified_time" content="2019-08-09T20:55:00+08:00"><meta property="article:tag" content="Getting Started"><meta name=twitter:card content="summary"><meta name=twitter:title content="Getting Started"><meta name=twitter:description content="Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server."><meta itemprop=name content="Getting Started"><meta itemprop=description content="Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server."><meta itemprop=datePublished content="2019-08-09T20:55:00+08:00"><meta itemprop=dateModified content="2019-08-09T20:55:00+08:00"><meta itemprop=wordCount content="808"><meta itemprop=keywords content="Getting Started"><title>Getting Started |
Chirpy</title><link rel=apple-touch-icon sizes=180x180 href=/chirpy-starter/img/favicons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/chirpy-starter/img/favicons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/chirpy-starter/img/favicons/favicon-16x16.png><link rel="shortcut icon" href=/chirpy-starter/img/favicons/favicon.ico><meta name=apple-mobile-web-app-title content="Chirpy"><meta name=application-name content="Chirpy"><meta name=msapplication-TileColor content="#da532c"><meta name=msapplication-config content="/chirpy-starter/img/favicons/browserconfig.xml"><meta name=theme-color content="#ffffff"><link rel=preconnect href=https://fonts.googleapis.com><link rel=dns-prefetch href=https://fonts.googleapis.com><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link rel=dns-prefetch href=https://fonts.gstatic.com><link rel=preconnect href=https://cdn.jsdelivr.net><link rel=dns-prefetch href=https://cdn.jsdelivr.net><link rel=stylesheet href=https://geekifan.github.io/chirpy-starter/css/main.min.6135c0700b2b81f4338a5c119b7a78b2bd20208c6f27ae64a19d0ef65cba906c.css><link rel=stylesheet href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&amp;family=Source+Sans+Pro:wght@400;600;700;900&amp;display=swap"><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.1/css/all.min.css><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.css><link rel=stylesheet href=/chirpy-starter/><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/css/glightbox.min.css><script src=/chirpy-starter/js/modules/theme.js></script><script src=https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/js/glightbox.min.js></script><script src=https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/locale/en.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/relativeTime.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/localizedFormat.js></script><script src=https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.js></script><script defer src=/chirpy-starter/js/post.js></script></head><body><aside aria-label=Sidebar id=sidebar class="d-flex flex-column align-items-end"><header class=profile-wrapper><a href=/chirpy-starter/ id=avatar class=rounded-circle><img src=/chirpy-starter/img/commons/avatar.jpg width=112 height=112 alt=avatar onerror='this.style.display="none"'></a>
<a class="site-title d-block" href=/chirpy-starter/>Chirpy</a><p class="site-subtitle fst-italic mb-0">A text-focused blog theme</p></header><nav class="flex-column flex-grow-1 w-100 ps-0"><ul class=nav><li class=nav-item><a href=/chirpy-starter/ class=nav-link><i class="fa-fw fas fa-house"></i>
<span>HOME</span></a></li><li class=nav-item><a href=/chirpy-starter/categories/ class=nav-link><i class="fa-fw fas fa-stream"></i>
<span>CATEGORIES</span></a></li><li class=nav-item><a href=/chirpy-starter/tags/ class=nav-link><i class="fa-fw fas fa-tags"></i>
<span>TAGS</span></a></li><li class=nav-item><a href=/chirpy-starter/archives/ class=nav-link><i class="fa-fw fas fa-archive"></i>
<span>ARCHIVES</span></a></li><li class=nav-item><a href=/chirpy-starter/about/ class=nav-link><i class="fa-fw fas fa-info-circle"></i>
<span>ABOUT</span></a></li><li class="nav-item mt-4"><a class="nav-link no-hover"><i class="fa-fw fas fa-language"></i><div class=lang-dropdown><select class=lang-select onchange="location=this.value"><option value=https://geekifan.github.io/chirpy-starter/zh-cn/>中文</option><option value=https://geekifan.github.io/chirpy-starter/en/ selected>English</option></select></div></a></li></ul></nav><div class="sidebar-bottom d-flex flex-wrap align-items-center w-100"><button type=button class="btn btn-link nav-link" aria-label="Switch Mode" id=mode-toggle>
<i class="fas fa-adjust"></i>
</button>
<span class=icon-border></span>
<a href=https://github.com/yourusername aria-label=github target=_blank rel="noopener noreferrer"><i class="fab fa-github"></i>
</a><a href=https://twitter.com/yourhandle aria-label=twitter target=_blank rel="noopener noreferrer"><i class="fab fa-twitter"></i>
</a><a href=mailto:your.email@example.com aria-label=email target=_blank rel="noopener noreferrer"><i class="fas fa-envelope"></i>
</a><a href=https://geekifan.github.io/chirpy-starter/index.xml aria-label=rss><i class="fas fa-rss"></i></a></div></aside><div id=main-wrapper class="d-flex justify-content-center"><div class="container d-flex flex-column px-xxl-5"><header id=topbar-wrapper class=flex-shrink-0 aria-label="Top Bar"><div id=topbar class="d-flex align-items-center justify-content-between px-lg-3 h-100"><nav id=breadcrumb aria-label=Breadcrumb><span><a href=/chirpy-starter/>Home</a>
</span><span>Getting Started</span></nav><button type=button id=sidebar-trigger class="btn btn-link" aria-label=Sidebar>
<i class="fas fa-bars fa-fw"></i></button><div id=topbar-title>Getting Started</div><button type=button id=search-trigger class="btn btn-link" aria-label=Search>
<i class="fas fa-search fa-fw"></i>
</button>
<search id=search class="align-items-center ms-3 ms-lg-0"><i class="fas fa-search fa-fw"></i>
<input class=form-control id=search-input type=search aria-label=search autocomplete=off placeholder=Search...>
</search><button type=button class="btn btn-link text-decoration-none" id=search-cancel>Cancel</button></div></header><div class="row flex-grow-1"><main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4"><article class=px-1 data-toc=true><header><h1 data-toc-skip>Getting Started</h1><p class="post-desc fw-light mb-4">Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.</p><div class="post-meta text-muted"><span>Posted
<time data-ts=1565355300 data-df=ll data-bs-toggle=tooltip data-bs-placement=bottom>%b %e, %Y</time></span><div class="d-flex justify-content-between"><span>By
<em><a href=https://github.com/geekifan>Yifan</a></em></span><div><span class=readtime data-bs-toggle=tooltip data-bs-placement=bottom title="1193 words"><em>6 min</em> read</span></div></div></div></header><div id=toc-bar class="d-flex align-items-center justify-content-between invisible"><span class="label text-truncate">Getting Started</span>
<button type=button class="toc-trigger btn me-1">
<i class="fa-solid fa-list-ul fa-fw"></i></button></div><button id=toc-solo-trigger type=button class="toc-trigger btn btn-outline-secondary btn-sm">
<span class="label ps-2 pe-1">Contents</span>
<i class="fa-solid fa-angle-right fa-fw"></i>
</button>
<dialog id=toc-popup class=p-0><div class="header d-flex flex-row align-items-center justify-content-between"><div class="label text-truncate py-2 ms-4">Getting Started</div><button id=toc-popup-close type=button class="btn mx-1 my-1 opacity-75">
<i class="fas fa-close"></i></button></div><div id=toc-popup-content class="px-4 py-3 pb-4"><nav id=TableOfContents><ul><li><a href=#creating-a-site-repository>Creating a Site Repository</a><ul><li><a href=#option-1-using-the-starter-recommended>Option 1. Using the Starter (Recommended)</a></li><li><a href=#option-2-forking-the-theme>Option 2. Forking the Theme</a></li></ul></li><li><a href=#setting-up-the-environment>Setting up the Environment</a><ul><li><a href=#using-dev-containers-recommended-for-windows>Using Dev Containers (Recommended for Windows)</a></li><li><a href=#setting-up-natively-recommended-for-unix-like-os>Setting up Natively (Recommended for Unix-like OS)</a></li></ul></li><li><a href=#usage>Usage</a><ul><li><a href=#start-the-jekyll-server>Start the Jekyll Server</a></li><li><a href=#configuration>Configuration</a></li><li><a href=#social-contact-options>Social Contact Options</a></li><li><a href=#customizing-the-stylesheet>Customizing the Stylesheet</a></li><li><a href=#customizing-static-assets>Customizing Static Assets</a></li></ul></li><li><a href=#deployment>Deployment</a><ul><li><a href=#deploy-using-github-actions>Deploy Using Github Actions</a></li><li><a href=#manual-build-and-deployment>Manual Build and Deployment</a></li></ul></li></ul></nav></div></dialog><div class=content><blockquote class=prompt-warning><p><strong>NOTE:</strong> This tutorial is not fully migrated from the Jekyll version &ndash; please reference with caution.</p></blockquote><h2 id=creating-a-site-repository id=creating-a-site-repository><span class=me-2>Creating a Site Repository</span>
<a href=#creating-a-site-repository class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>When creating your site repository, you have two options depending on your needs:</p><h3 id=option-1-using-the-starter-recommended id=option-1-using-the-starter-recommended><span class=me-2>Option 1. Using the Starter (Recommended)</span>
<a href=#option-1-using-the-starter-recommended class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>This approach simplifies upgrades, isolates unnecessary files, and is perfect for users who want to focus on writing with minimal configuration.</p><ol><li>Sign in to GitHub and navigate to the <a href=https://github.com/geekifan/chirpy-starter><strong>starter</strong></a>.</li><li>Click the <kbd>Use this template</kbd> button and then select <kbd>Create a new repository</kbd>.</li><li>Name the new repository <code>&lt;username>.github.io</code>, replacing <code>username</code> with your lowercase GitHub username.</li></ol><h3 id=option-2-forking-the-theme id=option-2-forking-the-theme><span class=me-2>Option 2. Forking the Theme</span>
<a href=#option-2-forking-the-theme class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>This approach is convenient for modifying features or UI design, but presents challenges during upgrades. So don&rsquo;t try this unless you are familiar with Jekyll and plan to heavily modify this theme.</p><ol><li>Sign in to GitHub.</li><li><a href=https://github.com/geekifan/jekyll-theme-chirpy/fork>Fork the theme repository</a>.</li><li>Name the new repository <code>&lt;username>.github.io</code>, replacing <code>username</code> with your lowercase GitHub username.</li></ol><h2 id=setting-up-the-environment id=setting-up-the-environment><span class=me-2>Setting up the Environment</span>
<a href=#setting-up-the-environment class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>Once your repository is created, it&rsquo;s time to set up your development environment. There are two primary methods:</p><h3 id=using-dev-containers-recommended-for-windows id=using-dev-containers-recommended-for-windows><span class=me-2>Using Dev Containers (Recommended for Windows)</span>
<a href=#using-dev-containers-recommended-for-windows class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>Dev Containers offer an isolated environment using Docker, which prevents conflicts with your system and ensures all dependencies are managed within the container.</p><p><strong>Steps</strong>:</p><ol><li>Install Docker:<ul><li>On Windows/macOS, install <a href=https://www.docker.com/products/docker-desktop/>Docker Desktop</a>.</li><li>On Linux, install <a href=https://docs.docker.com/engine/install/>Docker Engine</a>.</li></ul></li><li>Install <a href=https://code.visualstudio.com/>VS Code</a> and the <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers">Dev Containers extension</a>.</li><li>Clone your repository:<ul><li>For Docker Desktop: Start VS Code and <a href=https://code.visualstudio.com/docs/devcontainers/containers#_quick-start-open-a-git-repository-or-github-pr-in-an-isolated-container-volume>clone your repo in a container volume</a>.</li><li>For Docker Engine: Clone your repo locally, then <a href=https://code.visualstudio.com/docs/devcontainers/containers#_quick-start-open-an-existing-folder-in-a-container>open it in a container</a> via VS Code.</li></ul></li><li>Wait for the Dev Containers setup to complete.</li></ol><h3 id=setting-up-natively-recommended-for-unix-like-os id=setting-up-natively-recommended-for-unix-like-os><span class=me-2>Setting up Natively (Recommended for Unix-like OS)</span>
<a href=#setting-up-natively-recommended-for-unix-like-os class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>For Unix-like systems, you can set up the environment natively for optimal performance, though you can also use Dev Containers as an alternative.</p><p><strong>Steps</strong>:</p><ol><li>Follow the <a href=https://gohugo.io/installation/>Hugo installation guide</a> to install Hugo and ensure <a href=https://git-scm.com/>Git</a> is installed.</li><li>Clone your repository to your local machine.</li><li>Run command <code>hugo mod get</code> to install the dependencies.</li></ol><h2 id=usage id=usage><span class=me-2>Usage</span>
<a href=#usage class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><h3 id=start-the-jekyll-server id=start-the-jekyll-server><span class=me-2>Start the Jekyll Server</span>
<a href=#start-the-jekyll-server class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>To run the site locally, use the following command:</p><div class=code-block><div class=code-header><span data-label-text=Terminal><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-fallback data-lang=fallback><span class=line><span class=cl>hugo serve</span></span></code></pre></td></tr></table></div></div></div><blockquote class=prompt-info><p>If you are using Dev Containers, you must run that command in the <strong>VS Code</strong> Terminal.</p></blockquote><p>After a few seconds, the local server will be available at <a href=http://127.0.0.1:1313>http://127.0.0.1:1313</a>.</p><h3 id=configuration id=configuration><span class=me-2>Configuration</span>
<a href=#configuration class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>Update the variables in <code class=filepath>_config.yml</code> as needed. Some typical options include:</p><ul><li><code>url</code></li><li><code>avatar</code></li><li><code>timezone</code></li><li><code>lang</code></li></ul><h3 id=social-contact-options id=social-contact-options><span class=me-2>Social Contact Options</span>
<a href=#social-contact-options class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>Social contact options are displayed at the bottom of the sidebar. You can enable or disable specific contacts in the <code class=filepath>_data/contact.yml</code> file.</p><h3 id=customizing-the-stylesheet id=customizing-the-stylesheet><span class=me-2>Customizing the Stylesheet</span>
<a href=#customizing-the-stylesheet class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>To customize the stylesheet, copy the theme&rsquo;s <code class=filepath>assets/css/jekyll-theme-chirpy.scss</code> file to the same path in your Jekyll site, and add your custom styles at the end of the file.</p><h3 id=customizing-static-assets id=customizing-static-assets><span class=me-2>Customizing Static Assets</span>
<a href=#customizing-static-assets class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>Static assets configuration was introduced in version <code>5.1.0</code>. The CDN of the static assets is defined in <code class=filepath>_data/origin/cors.ymll</code>. You can replace some of them based on the network conditions in the region where your website is published.</p><p>If you prefer to self-host the static assets, modify <code class=filepath>config/_default/params.toml</code> and turn <code>self_host</code> on. The static files are from <a href=https://github.com/geekifan/chirpy-static-assets#readme>geekifan/chirpy-static-assets</a> which is a fork of <a href=https://github.com/cotes2020/chirpy-static-assets#readme>cotes2020/chirpy-static-assets</a> with minimal changes to make it work with hugo.</p><h2 id=deployment id=deployment><span class=me-2>Deployment</span>
<a href=#deployment class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>Before deploying, check the <code class=filepath>_config.yml</code> file and ensure the <code>url</code> is configured correctly. If you prefer a <a href=https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites><strong>project site</strong></a> and don&rsquo;t use a custom domain, or if you want to visit your website with a base URL on a web server other than <strong>GitHub Pages</strong>, remember to set the <code>baseurl</code> to your project name, starting with a slash, e.g., <code>/project-name</code>.</p><p>Now you can choose <em>ONE</em> of the following methods to deploy your Jekyll site.</p><h3 id=deploy-using-github-actions id=deploy-using-github-actions><span class=me-2>Deploy Using Github Actions</span>
<a href=#deploy-using-github-actions class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>Prepare the following:</p><ul><li><p>If you&rsquo;re on the GitHub Free plan, keep your site repository public.</p></li><li><p>If you have committed <code class=filepath>Gemfile.lockl</code> to the repository, and your local machine is not running Linux, update the platform list of the lock file:</p><div class=code-block><div class=code-header><span data-label-text=Console><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-console data-lang=console><span class=line><span class=cl><span class=gp>$</span> bundle lock --add-platform x86_64-linux
</span></span></code></pre></td></tr></table></div></div></div></li></ul><p>Next, configure the <em>Pages</em> service:</p><ol><li>Go to your repository on GitHub. Select the <em>Settings</em> tab, then click <em>Pages</em> in the left navigation bar. In the <strong>Source</strong> section (under <em>Build and deployment</em>), select <a href=https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow><strong>GitHub Actions</strong></a> from the dropdown menu.</li></ol><a href=/chirpy-starter/post/2019-08-09-getting-started/pages-source-light.png class="popup img-link light border normal"><img src=/chirpy-starter/post/2019-08-09-getting-started/pages-source-light.png alt="Build source" height=140 width=375>
</a><a href=/chirpy-starter/post/2019-08-09-getting-started/pages-source-dark.png class="popup img-link dark normal"><img src=/chirpy-starter/post/2019-08-09-getting-started/pages-source-dark.png alt="Build source" height=140 width=375></a><ol start=2><li>Push any commits to GitHub to trigger the <em>Actions</em> workflow. In the <em>Actions</em> tab of your repository, you should see the workflow <em>Build and Deploy</em> running. Once the build is complete and successful, the site will be deployed automatically.</li></ol><p>You can now visit the URL provided by GitHub to access your site.</p><h3 id=manual-build-and-deployment id=manual-build-and-deployment><span class=me-2>Manual Build and Deployment</span>
<a href=#manual-build-and-deployment class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>For self-hosted servers, you will need to build the site on your local machine and then upload the site files to the server.</p><p>Navigate to the root of the source project, and build your site with the following command:</p><div class=code-block><div class=code-header><span data-label-text=Console><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-console data-lang=console><span class=line><span class=cl><span class=gp>$</span> <span class=nv>JEKYLL_ENV</span><span class=o>=</span>production bundle <span class=nb>exec</span> jekyll b
</span></span></code></pre></td></tr></table></div></div></div><p>Unless you specified the output path, the generated site files will be placed in the <code class=filepath>_site</code>folder of the project&rsquo;s root directory. Upload these files to your target server.</p></div><div class="post-tail-wrapper text-muted"><div class="post-meta mb-3"><i class="far fa-folder-open fa-fw me-1"></i>
<a href=/categories/blogging/>Blogging</a>
,
<a href=/categories/blogging/tutorial/>Tutorial</a></div><div class=post-tags><i class="fa fa-tags fa-fw me-1"></i>
<a href=/tags/getting-started/ class="post-tag no-text-decoration">getting started</a></div><div class="post-tail-bottom d-flex justify-content-between align-items-center mt-5 pb-2"><div class=license-wrapper>This post is licensed under <a href=https://creativecommons.org/licenses/by/4.0/>CC BY 4.0</a> by the author.</div></div></div></article></main><aside aria-label=Panel id=panel-wrapper class="col-xl-3 ps-2 text-muted"><div class=access><section id=access-lastmod><h2 class=panel-heading>Recently Updated</h2><ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2"><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-11-customize-the-favicon/>Customize the Favicon</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-09-getting-started/>Getting Started</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-08-write-a-new-post/>Writing a New Post</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-08-text-and-typography/>Text and Typography</a></li></ul></section><section><h2 class=panel-heading>Trending Tags</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"><a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/favicon/>favicon</a>
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/getting-started/>getting started</a>
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/typography/>typography</a>
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/writing/>writing</a></div></section></div><div class="toc-border-cover z-3"></div><section id=toc-wrapper class="invisible position-sticky ps-0 pe-4 pb-4"><h2 class="panel-heading ps-3 pb-2 mb-0">Contents</h2><nav id=toc></nav></section></aside></div><div class=row><div id=tail-wrapper class="col-12 col-lg-11 col-xl-9 px-md-4"><aside id=related-posts aria-labelledby=related-label><h3 class=mb-4 id=related-label>Further Reading</h3><nav class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4"><article class=col><a href=/chirpy-starter/post/2019-08-08-write-a-new-post/ class="post-preview card h-100"><div class=card-body><time data-ts=1565244600 data-df=ll>%b %e, %Y</time><h4 class="pt-0 my-2">Writing a New Post</h4><div class=text-muted><p>This tutorial will guide you how to write a post in the Chirpy template, and it&amp;rsquo;s worth reading even if you&amp;rsquo;ve used Hugo before, as many features require specific variables to be set. …</p></div></div></a></article><article class=col><a href=/chirpy-starter/post/2019-08-11-customize-the-favicon/ class="post-preview card h-100"><div class=card-body><time data-ts=1565454840 data-df=ll>%b %e, %Y</time><h4 class="pt-0 my-2">Customize the Favicon</h4><div class=text-muted><p>Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.</p></div></div></a></article><article class=col><a href=/chirpy-starter/post/2019-08-08-text-and-typography/ class="post-preview card h-100"><div class=card-body><time data-ts=1565235180 data-df=ll>%b %e, %Y</time><h4 class="pt-0 my-2">Text and Typography</h4><div class=text-muted><p>Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more.</p></div></div></a></article></nav></aside><nav class="post-navigation d-flex justify-content-between" aria-label="Post Navigation"><a href=/chirpy-starter/post/2019-08-08-write-a-new-post/ class="btn btn-outline-primary" aria-label=Older><p>Writing a New Post</p></a><a href=/chirpy-starter/post/2019-08-11-customize-the-favicon/ class="btn btn-outline-primary" aria-label=Newer><p>Customize the Favicon</p></a></nav><footer aria-label="Site Info" class="d-flex flex-column justify-content-center text-muted
flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3"><p>©
<time>2025</time>
<a href=https://github.com/geekifan>Yifan</a>.
<span data-bs-toggle=tooltip data-bs-placement=top title="Except where otherwise noted, the blog posts on this site are licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.">Some rights reserved.</span></p><p>Using the <a data-bs-toggle=tooltip data-bs-placement=top title=v1.0.2 href=https://github.com/geekifan/hugo-theme-chirpy target=_blank rel=noopener>Chirpy</a> theme for <a href=https://gohugo.io/ target=_blank rel=noopener>Hugo</a>.</p></footer></div></div><div id=search-result-wrapper class="d-flex justify-content-center d-none"><div class="col-11 content"><div id=search-hints><section><h2 class=panel-heading>Trending Tags</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"><a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/favicon/>favicon</a>
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/getting-started/>getting started</a>
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/typography/>typography</a>
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/writing/>writing</a></div></section></div><div id=search-results class="d-flex flex-wrap justify-content-center text-muted mt-3"></div></div></div><script>const DEFAULT_CONFIG={search:{minChars:1,maxResults:5,fields:{title:!0,description:!0,section:!0,contents:!0},strictMode:!0}};class FastSearch{constructor({searchInput:e,resultsContainer:t,json:n,searchResultTemplate:s=null,noResultsText:o=null}){this.searchInput=e,this.resultsContainer=t,this.json=n,this.searchResultTemplate=s,this.noResultsText=o,this.init()}init(){this.loadSearchIndex(),this.searchInput.addEventListener("input",e=>{if(!this.searchIndex){this.resultsContainer.innerHTML='<li class="search-message">Loading search index...</li>';return}this.performSearch(this.searchInput.value)})}async loadSearchIndex(){try{const e=await fetch(this.json);if(!e.ok)throw new Error("Failed to load search index");const t=await e.json();this.searchIndex=t.map(e=>({...e,searchableTitle:e.title?.toLowerCase()||"",searchableDesc:e.desc?.toLowerCase()||"",searchableSection:e.section?.toLowerCase()||"",searchableContents:e.contents?.toLowerCase()||""}))}catch(e){console.error("Error loading search index:",e),this.resultsContainer.innerHTML='<li class="search-message">Error loading search index...</li>'}}escapeHtml(e){return e?e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;"):""}containsTerm(e,t){return!!e&&!!t&&e.includes(t)}performSearch(e){if(e=e.toLowerCase().trim(),!e||!this.searchIndex||e.length<DEFAULT_CONFIG.search.minChars){this.resultsContainer.innerHTML="";return}const s=[e,...e.split(/\s+/).filter(e=>e.length>0)],t=[...new Set(s)],o=DEFAULT_CONFIG.search.strictMode,n=this.searchIndex.map(e=>{const s=this.checkFieldsForMatch(e,t[0]);if(o&&!s)return{item:e,score:0,matched:!1};let n=0,i=0,a=!1;t.forEach((t,s)=>{const r=s===0,o=this.checkFieldsForMatch(e,t);o&&(i++,o.inTitle&&(n+=r?10:5,a=!0),o.inDesc&&(n+=r?8:4),o.inSection&&(n+=r?6:3),o.inContents&&(n+=r?4:2))});const r=i/t.length,c=n*r*(a?1.5:1);return{item:e,score:c,matched:s}}).filter(e=>e.matched).sort((e,t)=>t.score-e.score).slice(0,DEFAULT_CONFIG.search.maxResults).map(e=>e.item);if(n.length===0){this.resultsContainer.innerHTML='<p class="mt-5">Oops! No results found.</p>';return}const i=n.map(e=>{let t="",n="";return e.categories&&(t=e.categories.join(", "),t=`<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${t}</div>`),e.tags&&(n=e.tags.join(", "),n=`<div><i class="fa fa-tag fa-fw"></i>${n}</div>`),`
<article class="px-1 px-sm-2 px-lg-4 px-xl-0">
<header>
<h2><a href="${this.escapeHtml(e.permalink)}">${this.escapeHtml(e.title)}</a></h2>
<div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
${t}
${n}
</div>
</header>
<p>${this.escapeHtml(e.contents)}</p>
</article>
`}).join("");this.resultsContainer.innerHTML=i}checkFieldsForMatch(e,t){const n={inTitle:!1,inDesc:!1,inSection:!1,inContents:!1};return DEFAULT_CONFIG.search.fields.title&&this.containsTerm(e.searchableTitle,t)&&(n.inTitle=!0),DEFAULT_CONFIG.search.fields.description&&this.containsTerm(e.searchableDesc,t)&&(n.inDesc=!0),DEFAULT_CONFIG.search.fields.section&&this.containsTerm(e.searchableSection,t)&&(n.inSection=!0),DEFAULT_CONFIG.search.fields.contents&&this.containsTerm(e.searchableContents,t)&&(n.inContents=!0),!!(n.inTitle||n.inDesc||n.inSection||n.inContents)&&n}}const search=new FastSearch({searchInput:document.getElementById("search-input"),resultsContainer:document.getElementById("search-results"),json:`/chirpy-starter/index.json`})</script></div><aside aria-label="Scroll to Top"><button id=back-to-top type=button class="btn btn-lg btn-box-shadow">
<i class="fas fa-angle-up"></i></button></aside></div><div id=mask class="d-none position-fixed w-100 h-100 z-1"></div></body></html>

BIN
post/2019-08-09-getting-started/pages-source-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
post/2019-08-09-getting-started/pages-source-light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB