Skip to content

Commit

Permalink
更新 2024-1-27-build_own_website.md
Browse files Browse the repository at this point in the history
  • Loading branch information
pianfan authored Jun 28, 2024
1 parent ed0d5e6 commit 9dbe1a3
Showing 1 changed file with 5 additions and 23 deletions.
28 changes: 5 additions & 23 deletions _posts/2024-1-27-build_own_website.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ author: pianfan

.md 文件是 markdown 文件,使用的是 Markdown 语言。这一易学易用的语言将 HTML 里的一些常见标签都用带有特殊含义的符号来表示,大大方便了文档的书写,而且对代码类文本的支持度很高,因此深受程序员的喜爱。我们的博客文章也需要用 Markdown 进行写作。如果你还不了解这个语言,可以去看[菜鸟教程](https://www.runoob.com/markdown/md-tutorial.html),非常简单。

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

![切换预览](https://pianfan.github.io/images/preview.png)

Expand All @@ -73,7 +73,7 @@ author: pianfan

![头像和logo](https://pianfan.github.io/images/avatar&ico.png)

avatar 代表头像,后面的链接是你想显示在页面的头像图片的 url。favicon 指网站图标,即显示在浏览器标签页和收藏夹里的 logo,通常以 32 * 32 像素大小的 .ico 图片为宜,也可以不设置。注意不要直接用已经注册过的 logo 来当作自己的网站图标,否则有可能涉及到侵权问题。我的网站图标就是我自己设计的,与 GitHub 的 logo 有点相似,我确实是参照它来设计的。你们大概看得出来是一个熊的样子吧(
avatar 代表头像,后面的链接是你想显示在页面的头像图片的 url。favicon 指网站图标,即显示在浏览器标签页和收藏夹里的 logo,通常以 32 * 32 像素大小的 .ico 图片为宜,也可以不设置。

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

Expand All @@ -91,27 +91,21 @@ author: pianfan

![版权标注和网址](https://pianfan.github.io/images/footer&url.png)

这两个就是我不说你也知道怎么改吧……

我要说的是,对于自由度满级的个人网站而言,footer-text 不一定非得是版权标注,如果你不在意的话,就不必这么严肃。但如果说你网站里的内容都确确实实是你自己创作的劳动成果的话,最好还是要有一个**版权声明**,以免无耻之人随便盗用你的文章。

- **其他**

如果你不知道改了之后会有什么后果,**不要去动它**

- ### 删除 _posts 文件夹并重建

_posts 文件夹里放的是博客文章,你以后的文章也要放在这里。现在你的_posts 文件夹里面放的还是我的文章,**请把它们全部删除**,以免造成侵权。如果要转载我的文章,请通过邮件向我申请。建议非必要不转载,直接分享链接是一样的效果。
_posts 文件夹里放的是博客文章,你以后的文章也要放在这里。现在你的_posts 文件夹里面放的还是我的文章,**请把它们全部删除**,以免造成侵权。

- ### 删除 images 文件夹并重建

别看了,快删,你留着我的图片干嘛,暗恋哥?

- ### 修改 about.md文件

about.md里的内容是展示在“关于”页面上的。

好了,以上就是所有必须要你修改的文件。你现在再点进去你的博客页面看看,不出意外的话应该是成功修改了的。这就是你最开始的博客网站了,以后的日子,就由你自己去探索、去创造、去经营。
好了,以上就是所有必须要你修改的文件。你现在再点进去你的博客页面看看,不出意外的话应该是成功修改了的。

## Step 3. 开始写你的第一篇文章

Expand All @@ -137,18 +131,6 @@ author: pianfan

- tags 是文章标签,可以有一个或多个。

- comments 不用管。本来我是打算用 Gitalk 做评论系统,但是一直连不上那边的服务器,不但无法使用评论,还拖慢网页加载速度,十分影响用户体验。我一开始是把它的相关文件都删了的,结果导致 Jekyll 那边无法通过,所以我后来用注释的形式将它屏蔽了(ps:其实由 GitHubPages 提供域名的个人网站并非完全由我们自己控制,而是借助了 Jekyll 静态网站生成器,它主要是提供一些部署上的支持,如果没有它,我们的网站就无法生成。所以我们要严格按照人家的规定来,不能随便乱动仓库里的文件结构)。那么干脆就用 GitHub 官方平台的评论系统,反正不用白不用嘛。

去开始构思你的第一篇博客文章吧,好的开始是成功的一半。如果你能坚持下去,我将会非常佩服你。因为我也不敢确定自己能否把写文的习惯坚持下去,这需要长期的投入,而且不一定有很理想的回馈。

---

恭喜你!读到这里,你已经成功一半了。剩下的那一半,需要你去自己摸索:这个博客仓库里的每一个文件里的每一句代码都有什么意义,该怎么把它玩转?如何改变网页的结构?如何把网页弄成你最喜欢的样式?如何给网站添加更多实用的功能?如何写出高质量高点击率的文章?如何吸引更多的人来到你的博客?如何把你的博客长期经营下去……等等等等。真的想做好个人博客的话,这些问题都是要考虑的。

感谢阅读,如果本篇文章对你有所帮助或启发,不妨在[评论区](https://github.com/pianfan/pianfan.github.io/discussions)里赞美一下博主,让博主看到你们的反馈,这样我就会更有信心和动力继续写下去了。

有什么疑问,请一定不要害羞,大胆在[社区](https://github.com/pianfan/pianfan.github.io/issues)提出来,这样我才能帮助你解答疑惑。

如果有读者要求的话,我会考虑出本篇教程的后续,来讲解具体怎么操作来改变博客的结构、样式和添加功能。

我应该不会讲 HTML、CSS 和 JavaScript 的语法规则,因为笔者实在觉得没有这个必要,笔者的目标也不是成为 Web 前端工程师,这些东西我也只是浅尝辄止。如果你正在找这方面的学习资源,可以去读 [MDN Web Docs](https://developer.mozilla.org/zh-CN/),这应该算是最权威的前端文档了,而且浅显易懂、内容精简,小白也能轻松掌握。[菜鸟教程](https://www.runoob.com/)的前端教程还要全面一点,也是专门为初学者设计的。笔者建议可以两个同时进行,先看一个学习完一节内容,再看另一个巩固一下,这也达到了练习和查漏补缺的效果。如果你比较倾向于跟着视频学习,那更不用说了,b站一抓一大把。
感谢阅读!

0 comments on commit 9dbe1a3

Please sign in to comment.