9q13nh 发表于 2024-10-3 05:27:58

零代码教你用 GitHub 搭建个人博客！


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/2HyIlGuO02Zw1s3FXc4vn241hNQqwjblglUORkeic2S1oiaOVWjPiavUuvFv6PFJFL8pW5VSEcSXyxoqTWQhVicsww/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p><img src="https://mmbiz.qpic.cn/mmbiz_png/uDRkMWLia28jREwDibM9pPtX6LHS2wpzxRc43iaXNzkxzxzDicx7xRfGMsPhBtUoC6h8hU7X6z00KYHJk7eqvmybDg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">转载</span>量子位，作者赖可</span><span style="color: black;">GitHub 不仅<span style="color: black;">能够</span>传代码，还<span style="color: black;">能够</span>建博客。</span><span style="color: black;">利用 GitHub Pages 平台，就<span style="color: black;">能够</span>搭建非常好用的个人博客。</span><span style="color: black;"><span style="color: black;">然则</span>难点在于，你在要敲<span style="color: black;">非常多</span>代码<span style="color: black;">才可</span>搭出一个博客。</span><span style="color: black;"><span style="color: black;">针对</span>小白和新手<span style="color: black;">来讲</span>，太不友好。</span><span style="color: black;"><span style="color: black;">不碍事</span>！</span><span style="color: black;"><span style="color: black;">此刻</span><span style="color: black;">不消</span>写代码<span style="color: black;">亦</span><span style="color: black;">能够</span>了。</span><span style="color: black;">不需要敲码，<span style="color: black;">不消</span>写<span style="color: black;">运用</span>命令行，<span style="color: black;">能够</span>自定义主题，还能有自己的域名。</span><span style="color: black;">Fast.ai <span style="color: black;">供给</span>了模版，只要注册一个 github 账号，小白就能够完成搭建博客的操作。</span><span style="color: black;">真是文科生友好～</span><span style="color: black;">下面是小白教程。</span>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">创建存储库 &amp; 创建主页</span></h2><span style="color: black;"><span style="color: black;">首要</span>，你需要注册一个 github 账号，并<span style="color: black;">保证</span>在线。</span><span style="color: black;"><span style="color: black;">而后</span>，点击这个网页<span style="color: black;">位置</span>：</span><span style="color: black;">https : //github.com/fastai/fast_template/generate</span><span style="color: black;">注册一个<strong style="color: blue;">存储库</strong>&nbsp;(repository)，<span style="color: black;">便是</span>存储博客的<span style="color: black;">地区</span>。</span><span style="color: black;">注册名字的格式是：</span><span style="color: black;"><strong style="color: blue;">&nbsp;github 上的名字 + github.io</strong>；</span><span style="color: black;">储存库的性质<span style="color: black;">选取</span><strong style="color: blue;">&nbsp;公共</strong>&nbsp;Public。</span><span style="color: black;"><span style="color: black;">倘若</span><span style="color: black;">选取</span> Private <span style="color: black;">便是</span>仅自己可见，<span style="color: black;">这般</span>需要付费</span><span style="color: black;"><img src="https://mmbiz.qpic.cn/mmbiz_png/YicUhk5aAGtBHlxt7Zjbz5ficGqeyWOY5oGlMHliczzAiblgic28Ib6MmzhhPLHPK4bJUYJInytnCbeaR4nE6FZfPKA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></span><span style="color: black;">下面就<span style="color: black;">能够</span>进行博客主页的<span style="color: black;">有些</span>基本设置。</span><span style="color: black;">进入主页，会看到的是一个名字为<strong style="color: blue;">index.md</strong>&nbsp;的文件，这是个 Markdown 文件。</span><span style="color: black;">Markdown 是一个<span style="color: black;">日前</span>创建格式化文本的<span style="color: black;">方便</span>又强大的<span style="color: black;">办法</span>。</span><span style="color: black;">在输入普通文本的时候，只需要加入<span style="color: black;">有些</span>特定字符就<span style="color: black;">能够</span><span style="color: black;">增多</span>特定的样式。</span><span style="color: black;"><span style="color: black;">例如</span>在一个一个词<span style="color: black;">或</span>短语前后都输入 *，就<span style="color: black;">能够</span>使其变成斜体。</span><img src="https://mmbiz.qpic.cn/mmbiz_png/YicUhk5aAGtBHlxt7Zjbz5ficGqeyWOY5oericpoZvFYVQHL6bLQ2OSlicibxXRJ7Tq640YAO4XTibNbAwLQFm78eSSg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">单击这个文件打开它，进入新的页面，点击<strong style="color: blue;">编辑按钮</strong>，即铅笔符号<span style="color: black;">起始</span>编辑。</span><img src="https://mmbiz.qpic.cn/mmbiz_png/YicUhk5aAGtBHlxt7Zjbz5ficGqeyWOY5oiaD1nZYHkv0NgnzibPFpdZic9MhuJZJCkdjjY9SxogibLQ1m5oc3r6MgFw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">点击&nbsp;<strong style="color: blue;">Preview changes</strong>&nbsp;<span style="color: black;">能够</span>浏览文本效果</span><span style="color: black;"><strong style="color: blue;"><img src="https://mmbiz.qpic.cn/mmbiz_png/YicUhk5aAGtBHlxt7Zjbz5ficGqeyWOY5ogzSu8a8Ekn95icr646jFERzAw9Sc9nC0wia6CBW6Qzd35ZT3GghjSxbw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">△</strong>blog 被设置成斜体</span><img src="https://mmbiz.qpic.cn/mmbiz_png/YicUhk5aAGtBHlxt7Zjbz5ficGqeyWOY5oAuUibRI454mf75nNbOOYWBYxWVxR07mDgMT0phIOib2QP2KUWdD6Mlgg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">滚动到底部并单击&nbsp;<strong style="color: blue;">Commit changes</strong>&nbsp;绿色按钮来提交。</span><span style="color: black;">在 GitHub 上，“提交” <span style="color: black;">寓意</span>着将其<span style="color: black;">保留</span>到 GitHub 服务器。</span><span style="color: black;">博客的域名<span style="color: black;">便是</span>，<strong style="color: blue;">**github 上注册的名字 + github.io</strong>，页面就会<span style="color: black;">表示</span>刚才输入的内容。</span><img src="https://mmbiz.qpic.cn/mmbiz_png/YicUhk5aAGtBHlxt7Zjbz5ficGqeyWOY5owfu4ABtUvyW5uWOnRnM8MQQdG8EhnsqlP1yfcUuZ4icq9uibDBCoxRyw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">还<span style="color: black;">能够</span>对博客进行其它设置，单击名为<strong style="color: blue;">_config.yml&nbsp;</strong>的文件，<span style="color: black;">而后</span>像之前<span style="color: black;">同样</span>单击<strong style="color: blue;">编辑按钮</strong>，在冒号后面输入相应的内容，<span style="color: black;">能够</span>更改标题，描述和 GitHub 用户名值。</span><span style="color: black;">输入的内容就会在主页<span style="color: black;">表示</span>。</span><img src="https://mmbiz.qpic.cn/mmbiz_png/YicUhk5aAGtBHlxt7Zjbz5ficGqeyWOY5oR2eJibokudibusCZu25du5gMib4H1SfarA9YOH8o3pGYvQHib5IveQHs7A/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">写<span style="color: black;">文案</span></span></h2><span style="color: black;">下面<span style="color: black;">能够</span>写博客<span style="color: black;">文案</span>了！</span><span style="color: black;">所有的<span style="color: black;">文案</span>都会放在<strong style="color: blue;">_posts</strong>&nbsp;文件夹中。</span><span style="color: black;">单击它，然后单击<strong style="color: blue;">&nbsp;创建文件</strong>按钮，创建一个新的文件。</span><span style="color: black;">文件名命名的格式是：</span><span style="color: black;">year-month-day-name.md，其中 year 是四位数，而 month 和 day 是两位数。</span><span style="color: black;">“name” <span style="color: black;">能够</span>自定义，扩展名 md 则用于 Markdown。</span><img src="https://mmbiz.qpic.cn/mmbiz_png/YicUhk5aAGtBHlxt7Zjbz5ficGqeyWOY5o9tSictPGiatqzpfFqvicMcUlGUCgP1lOCzWUgzqLymJrN8iaKV01My6reQ/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">写<span style="color: black;">文案</span>的时候<span style="color: black;">亦</span>用 Markdown 来标注格式。</span><span style="color: black;"><span style="color: black;">第1</span>行<span style="color: black;">做为</span>一级标题，开头加上 #，<span style="color: black;">倘若</span><span style="color: black;">文案</span>里面还需要小标题，## 用于二级标题，### 用于三级标题。</span><span style="color: black;">点击&nbsp;<strong style="color: blue;">Preview</strong>&nbsp;<span style="color: black;">能够</span>浏览。</span><img src="https://mmbiz.qpic.cn/mmbiz_png/YicUhk5aAGtBHlxt7Zjbz5ficGqeyWOY5ohJTuo0c8q7bnGUszqhB5N9ouf2kib6lExXxNIiaIsW8LTbKCNnTwKTcQ/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">一样</span>，点击绿色按钮&nbsp;<strong style="color: blue;">Commit new file</strong>&nbsp;来提交。</span><img src="https://mmbiz.qpic.cn/mmbiz_png/YicUhk5aAGtBHlxt7Zjbz5ficGqeyWOY5osRMncGQxfjA2icWCIRlzs4JlD9NiaKyGwr4ibn9GaxnGneOE5RNMAafGA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">提交完成后，<span style="color: black;">文案</span>就会出<span style="color: black;">此刻</span>博客主页上：</span><img src="https://mmbiz.qpic.cn/mmbiz_png/YicUhk5aAGtBHlxt7Zjbz5ficGqeyWOY5oLzw0s4aRJps0RriaVckicicboXY5icvC9W8yHRCu5Oa4OfxOElD8PZia6uw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">点进去的<span style="color: black;">文案</span>界面是<span style="color: black;">这般</span>：</span><img src="https://mmbiz.qpic.cn/mmbiz_png/YicUhk5aAGtBHlxt7Zjbz5ficGqeyWOY5oy1IACbEHeSb8ghInbTeKL9BP0GOMDxWbExeyB9lRzsFjNm3FKsdOow/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">想删除<span style="color: black;">文案</span>，<span style="color: black;">一样</span>进入<strong style="color: blue;">_posts</strong>&nbsp;文件夹，找到对应的文件，进行操作。</span><img src="https://mmbiz.qpic.cn/mmbiz_png/YicUhk5aAGtBHlxt7Zjbz5ficGqeyWOY5ohaib6mu5JtzDuO5zCxeCITicM7LrZkBiaRlzqHLibx9v6Q7bmM6e465O1Q/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><strong style="color: blue;">记住</strong>，和写<span style="color: black;">文案</span><span style="color: black;">同样</span>，点完了删除后，还需要点击绿色的&nbsp;<strong style="color: blue;">commit</strong>，才算操作成功。</span><span style="color: black;"><span style="color: black;">倘若</span>想在<span style="color: black;">文案</span>里面加入<span style="color: black;">照片</span>，需要先把<span style="color: black;">照片</span>上传：</span><img src="https://mmbiz.qpic.cn/mmbiz_png/YicUhk5aAGtBHlxt7Zjbz5ficGqeyWOY5om2FxJsxO9vHOAbeib1SX7spsKKia9a1awMPq08sGatcsItxtYq2vz1cA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">而后</span>在<span style="color: black;">文案</span>中以如下字符串来加入：</span><span style="color: black;">!(images/filename.jpg</span><span style="color: black;"><span style="color: black;">倘若</span>想加博客<span style="color: black;">文案</span>索引目录，输入下面两行</span><span style="color: black;">1. TOC</span><span style="color: black;">{:toc}</span><span style="color: black;">之前写的博文标题（以 #标志的一级标题）就会自动出<span style="color: black;">此刻</span>目录里，并且自带超链接。</span><span style="color: black;"><span style="color: black;">倘若</span>想加入数学符号，<span style="color: black;">能够</span>用 LaTeX 的格式。</span><span style="color: black;"><span style="color: black;">首要</span>在<strong style="color: blue;">&nbsp;_config.yml</strong>&nbsp;文件中进行设置，将&nbsp;<strong style="color: blue;">use_math</strong>&nbsp;进行简单的修改，变成<span style="color: black;">这般</span>：</span><span style="color: black;">use_math: true</span><span style="color: black;">只需要在字符串前后各加一个&nbsp;<strong style="color: blue;">$</strong>，<span style="color: black;">例如</span><span style="color: black;">&nbsp;$\sum_n (x)$</span>，<span style="color: black;">或</span>想让它单行<span style="color: black;">表示</span>的时候，在上下两行各加<strong style="color: blue;">$$</strong>，像<span style="color: black;">这般</span>：</span><span style="color: black;">$$</span><span style="color: black;">\sum_n (x)</span><span style="color: black;">$$</span><span style="color: black;"><span style="color: black;">表示</span>出来就会是：</span><img src="https://mmbiz.qpic.cn/mmbiz_png/YicUhk5aAGtBHlxt7Zjbz5ficGqeyWOY5o9PiaiafeNKpD8UPdPQDazZXrtH3oph2DraATd6T2iacgZssb1ibstIFbRQ/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">以上～</span><span style="color: black;">学会这些内容，你就<span style="color: black;">成为了</span> Github pages 博客初级玩家，是不是超级易懂易上手？</span><span style="color: black;"><span style="color: black;">倘若</span>你想用玩转博客，<span style="color: black;">亦</span>可继续钻研，说不定玩着玩着就<span style="color: black;">发掘</span>，已然沉迷于技术～</span><img src="https://mmbiz.qpic.cn/mmbiz_gif/YicUhk5aAGtBHlxt7Zjbz5ficGqeyWOY5o6o6nhiccibsNYjLKJBa51Z3KDzSAgGNibiaIicoYpU1vIlXzJPOuIV1fYLA/640?wx_fmt=gif&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1" style="width: 50%; margin-bottom: 20px;">
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">传送门</span></h2><span style="color: black;">https://www.fast.ai/2020/01/16/fast_template/</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/2HyIlGuO02Zw1s3FXc4vn241hNQqwjblglUORkeic2S1oiaOVWjPiavUuvFv6PFJFL8pW5VSEcSXyxoqTWQhVicsww/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>




m5k1umn 发表于 2024-10-28 12:40:25

楼主的文章非常有意义，提升了我的知识水平。
页: [1]
查看完整版本: 零代码教你用 GitHub 搭建个人博客！