<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.10.0">Jekyll</generator><link href="https://whwenxin.13871013111.com//feed.xml" rel="self" type="application/atom+xml" /><link href="https://whwenxin.13871013111.com//" rel="alternate" type="text/html" /><updated>2026-07-08T03:10:14+00:00</updated><id>https://whwenxin.13871013111.com//feed.xml</id><title type="html">jywl70hj’s blog</title><subtitle>个人技术博客</subtitle><entry><title type="html">零基础小白如何搭建自己的 github.io 个人网站</title><link href="https://whwenxin.13871013111.com//build_own_website/" rel="alternate" type="text/html" title="零基础小白如何搭建自己的 github.io 个人网站" /><published>2024-01-27T00:00:00+00:00</published><updated>2024-01-27T00:00:00+00:00</updated><id>https://whwenxin.13871013111.com//build_own_website</id><content type="html" xml:base="https://whwenxin.13871013111.com//build_own_website/"><![CDATA[<h6 id="说明本教程只针对不了解网站搭建并且想要快速搭建起个人博客的新手帮助建立网站的平台有很多有一定网站开发基础的读者可另寻门路">说明：本教程只针对不了解网站搭建并且想要快速搭建起个人博客的新手，帮助建立网站的平台有很多，有一定网站开发基础的读者可另寻门路<!-- more --></h6>

<h2 id="step-0-准备工作">Step 0. 准备工作</h2>

<p>利用 GitHub Pages 免费获取你自己的网站域名只需要一个先决条件：拥有你自己的 github 账号。如果你目前还没有，可以去 <a href="https://github.com">GitHub 官网</a>先注册一个。</p>

<h2 id="step-1-建立博客仓库">Step 1. 建立博客仓库</h2>

<p>借助 GitHub 平台搭建博客网站，首先要建立一个与你的 github 账号相关联的博客仓库。推荐没有网站建设经验的新手通过 fork 我的博客仓库迅速建立起你的第一个网站。下面我们就来详细介绍这种方法。</p>

<p>点击链接 <a href="https://github.com/pianfan/pianfan.github.io">https://github.com/pianfan/pianfan.github.io</a> 进入我的博客仓库地址，点击这里的 Fork。</p>

<p><img src="https://pianfan.github.io/images/build_own_website/fork.png" alt="点击 Fork" /></p>

<p>仓库名称填写 <code class="language-plaintext highlighter-rouge">username.github.io</code>，注意 <code class="language-plaintext highlighter-rouge">username</code> 指的是用户名不是昵称。</p>

<p><img src="https://pianfan.github.io/images/build_own_website/repositoryname.png" alt="设置仓库名称" /></p>

<p>点击 Create fork，完成创建。这样你就有了你的第一个博客仓库，<strong>以后的操作都在你自己的仓库进行</strong>。</p>

<p>这个地方也不要忘记改成你自己的网址哦~</p>

<p><img src="https://pianfan.github.io/images/build_own_website/modifywebsite.png" alt="设置网址" /></p>

<h2 id="step-2-修改仓库文件">Step 2. 修改仓库文件</h2>

<p>如果这时你在浏览器网址一栏搜索你刚刚建立的仓库名，出现的会是我的博客页面。因为你刚才是直接复刻的我的博客仓库，里面的文件都是我原来仓库里的文件。你需要修改几个文件里的几个最基本的地方，来使页面与你的个人信息相关联。</p>

<ul>
  <li>
    <h3 id="修改-readmemd-文件">修改 README.md 文件</h3>

    <p>README.md 文件是对仓库的说明，一般来说第一行标题都是仓库名称，后面就是关于仓库的一些介绍。我只填写了最简要的说明，你可以根据你自己的情况来写，或者不写也可以，它并不影响我们的网站页面。</p>

    <p>要修改文件可直接点击文件名称，然后点击右上角的笔图案，即可开始编辑。</p>

    <p><img src="https://pianfan.github.io/images/build_own_website/pen.png" alt="点击笔" /></p>

    <p>.md 文件是 markdown 文件，使用的是 Markdown 语言。这一易学易用的语言将 HTML 里的一些常见标签都用带有特殊含义的符号来表示，大大方便了文档的书写。我们的博客文章也需要用 Markdown 进行写作。</p>

    <p>github 支持对 markdown 文件进行预览。当在 github 上对 markdown 文件进行编辑的时候，点击 Edit 旁边的 Preview，即可预览当前的页面效果。这在编辑过程中经常用来检查文章排版是否符合预期。</p>

    <p><img src="https://pianfan.github.io/images/build_own_website/preview.png" alt="切换预览" /></p>
  </li>
  <li>
    <h3 id="修改-_configyml-文件">修改 _config.yml 文件</h3>

    <p>_config.yml 文件是博客网站的核心配置文件，里面包含了你想要显示在网站上的各种构造信息。下面我会一步一步告诉你哪些信息需要改。</p>

    <ul>
      <li>
        <p><strong>网站名称和网站描述</strong></p>

        <p><img src="https://pianfan.github.io/images/build_own_website/name&amp;desc.png" alt="名称和描述" /></p>

        <p>这个根据你自己的喜好来设置，不一定要仿造我的模式。比如你可以给你的博客网站取一个有特色的名字，网站描述也可以是简短的自我介绍或个性签名等任何你想表达的内容。</p>
      </li>
      <li>
        <p><strong>个人头像和网站 logo</strong></p>

        <p><img src="https://pianfan.github.io/images/build_own_website/avatar&amp;ico.png" alt="头像和 logo" /></p>

        <p>avatar 代表头像，后面的链接是你想显示在页面的头像图片的 url。favicon 指网站图标，即显示在浏览器标签页和收藏夹里的 logo，通常以 32 * 32 像素大小的 .ico 图片为宜，也可以不设置。</p>

        <p>咱博客网站里的所有图片不是上传到 github 仓库里就可以显示到页面上了，需要用到图床。我用的是 <a href="https://picgo.github.io/PicGo-Doc/zh/">PicGo</a>，只要与 github 仓库绑定就可以实现上传，且可以一键复制为 Markdown 形式，方便写文时插入图片。</p>

        <p><img src="https://pianfan.github.io/images/build_own_website/picgoset.png" alt="PicGo 设置" /></p>

        <p><img src="https://pianfan.github.io/images/build_own_website/markdownimg.png" alt="Markdown 形式" /></p>
      </li>
      <li>
        <p><strong>个人社交链接</strong></p>

        <p><img src="https://pianfan.github.io/images/build_own_website/links.png" alt="社交链接" /></p>

        <p>填用户名就好，也可以不填。</p>
      </li>
      <li>
        <p><strong>脚注和网址</strong></p>

        <p><img src="https://pianfan.github.io/images/build_own_website/footer&amp;url.png" alt="版权标注和网址" /></p>
      </li>
      <li>
        <p><strong>Gitalk 配置信息</strong></p>

        <p><img src="https://pianfan.github.io/images/build_own_website/gitalk.png" alt="Gitalk 配置" /></p>

        <p>Gitalk 用于给博客文章引入评论功能，配置方法请参考 <a href="https://github.com/gitalk/gitalk?tab=readme-ov-file#usage">https://github.com/gitalk/gitalk?tab=readme-ov-file#usage</a>。</p>
      </li>
      <li>
        <p><strong>其他</strong></p>

        <p>如果你不知道改了之后会有什么后果，不要去动它。</p>
      </li>
    </ul>
  </li>
  <li>
    <h3 id="清空-_posts-文件夹">清空 _posts 文件夹</h3>

    <p>_posts 文件夹里放的是博客文章，你以后的文章也要放在这里。现在你的 _posts 文件夹里面放的还是我的文章，请把它们全部删除。直接在 GitHub 上操作似乎不支持批量删除文件，一个快捷的方法是删除整个文件夹再新建一个空文件夹，将其命名为“_posts”即可。</p>
  </li>
  <li>
    <h3 id="清空-images-文件夹">清空 images 文件夹</h3>

    <p>images 文件夹里放的是需要显示在网站上的图片。与 _posts 文件夹一样，这个文件夹也需要清空（删除文件夹并重建）。</p>
  </li>
  <li>
    <h3 id="修改-aboutmd-文件">修改 about.md 文件</h3>

    <p>about.md 里的内容是展示在“关于”页面上的。</p>
  </li>
</ul>

<p>好了，以上就是所有必须要你修改的文件。你现在再点进去你的博客页面看看，不出意外的话应该是成功修改了的。</p>

<h2 id="step-3-开始写你的第一篇文章">Step 3. 开始写你的第一篇文章</h2>

<p>在 README.md 部分我有提到过怎么在 github 上编写 Markdown 文件，写文章也是一样的道理。当然，你完全可以在其他地方编辑你的文章源码，再上传到博客仓库，这其实也是我更为推荐的方法。</p>

<p>文章文件名请按照下面的例子呈现的格式命名：</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>2024-01-25-letter_to_you.md
</code></pre></div></div>

<p>还有一点需要注意，每篇文章开头记得附上说明，格式如下：</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
layout: post
title: "文章标题"
date: 2024-01-27
tags: [tag1, tag2]
toc: true
comments: false
author: xxx
---
</code></pre></div></div>

<ul>
  <li><code class="language-plaintext highlighter-rouge">tags</code> 是文章标签，可以有 0 个或多个。</li>
  <li><code class="language-plaintext highlighter-rouge">toc</code> 用于控制是否开启文章侧栏目录。</li>
  <li><code class="language-plaintext highlighter-rouge">comments</code> 用于控制是否开启文章评论区。</li>
</ul>

<hr />

<p>本篇教程就到此结束啦！如果有任何问题，欢迎在下方评论区留言~</p>]]></content><author><name>Pianfan</name></author><category term="tutorial" /><summary type="html"><![CDATA[说明：本教程只针对不了解网站搭建并且想要快速搭建起个人博客的新手，帮助建立网站的平台有很多，有一定网站开发基础的读者可另寻门路]]></summary></entry><entry><title type="html">来自博主的一封信——致每一个我们</title><link href="https://whwenxin.13871013111.com//letter_to_you/" rel="alternate" type="text/html" title="来自博主的一封信——致每一个我们" /><published>2024-01-25T00:00:00+00:00</published><updated>2024-01-25T00:00:00+00:00</updated><id>https://whwenxin.13871013111.com//letter_to_you</id><content type="html" xml:base="https://whwenxin.13871013111.com//letter_to_you/"><![CDATA[<p>欢迎你来到我的博客，不论你是谁。我并不关心你的身份，你也不必关注我的身份。实际上我只是中国千千万万计算机相关专业大学生中普通的一员而已。但所谓英雄不论出处，在这里，我们只关心技术。<!-- more --></p>

<p>这是我自主打造的个人技术博客，这里的绝大多数文章都与计算机、软件等技术密切相关，都是我对自己的学习和实践经历进行整理总结后的具有个人思想的图文描述。</p>

<p>关于我为什么要创建自己的技术博客，我想原因大概有以下几点：</p>

<ul>
  <li>
    <p>作为正在学习技术的预备程序员，总结自己的学习过程并将其中的重要部分记录下来是有必要的，这有助于加深对技术及其背后原理的理解。</p>
  </li>
  <li>
    <p>作为面临就业压力的大学生，拥有自己的一个博客，并且发表过能体现个人水平和项目经历等有价值的内容，对于求职是一个不错的加分项。</p>
  </li>
  <li>
    <p>拥有自己的个人博客站点，可以不受第三方平台的限制，自主设计喜欢的页面风格，网站的一切规则几乎都由自己制定，自由度高，可塑性强。</p>
  </li>
</ul>

<p>以上原因也适用于每一个和我有着同样追求的你，所以，我的第一篇非公告类文章，会教你如何用最简单的方式借助 GitHub Pages 建立自己的个人博客。如果你目前还没有自己的专属个人博客，而且有这个想法，可以按照我写的步骤快速建造出你的个人博客网站。链接：<a href="https://pianfan.github.io/build_own_website/">零基础小白如何搭建自己的 github.io 个人网站</a>。</p>

<p>接下来的日子里，让我们一起，共同进步，见证成长，合力打造一个<strong>平等、友好、开放、极简</strong>的技术博客环境！</p>]]></content><author><name>Pianfan</name></author><category term="notice" /><summary type="html"><![CDATA[欢迎你来到我的博客，不论你是谁。我并不关心你的身份，你也不必关注我的身份。实际上我只是中国千千万万计算机相关专业大学生中普通的一员而已。但所谓英雄不论出处，在这里，我们只关心技术。]]></summary></entry></feed>