我建了自己的个人网站!耶😎
由 Mux 赞助的 DEV 全球展示挑战赛:展示你的项目!
嘿,来自世界各地的开发者们!!🤗
今天的文章我想和大家聊聊我的个人网站建设历程。我用了哪些技术?为什么选择这些技术?我的网站已经经历了两个版本,每个版本都使用了完全不同的技术。我们来详细说说这两个版本吧。
哦,对了!它已经上线了,网址是https://bassemmohamed.me。虽然还远未完成,但如果你想快速浏览一下,请随意。如果你喜欢的话,那就更好了!迫不及待了!!🤤
为什么要建个人网站呢?🤔
嗯,我想要一个可以兼作个人简介和博客的空间。我不太在意数据分析和流量(现在也一样😏)。我只是需要一个自由的空间来向大家介绍我自己、我的想法和我的兴趣爱好。另外,这也算是个小小的炫耀吧。我喜欢申请职位时填写那个personal website栏目。这让我感觉很好,也增强了我的自信心。
既然我们已经了解了“为什么” ,接下来就让我们深入探讨“如何做”吧🏊♂️
在开始之前,我要说明一下,这篇文章并非旨在列出技术的优缺点,也不是教你如何搭建个人网站的指南。这只是我个人的经验分享。我相信肯定还有更好的方法。我只是分享一下我的这段经历。
首先,检查清单是什么?🗒
- 个人简介(简单的自我介绍页面即可,没什么大不了的😎)
- 博客(有点棘手😓)
- 预算有限(没钱搞这些破事儿💸)
- 简单快捷(我还有工作要做,你知道的👨💻)
我四处了解了一下,读了几篇文章,看了些视频。最终,WordPress 感觉就像是为我量身打造的。它的构建方式PHP我很熟悉,它拥有功能丰富的编辑器,而且是开源的。此外,它的设置和启动都非常快捷。
让我们进入正题(第一条路线)。
我的域名和主机服务都已设置完毕。Digital Ocean 提供预装 WordPress 的 Droplet 服务器,这正合我意。我只需要添加一个 SSL 证书。然后,我开始了最重要的部分:搭建用户界面。用 WordPress 的术语来说,我搭建了一个简易的 WordPress 主题。由于网站非常简洁,所以很快就完成了。只有首页、关于我们和文章页面。就这些!
庆祝时间到!我拥有自己的网站啦!!🎉🎉
事情并非总是那么美好😔
过了一段时间。那天是平常的一天,我突然想看看我的网站。结果却出乎我的意料,出现了这个错误信息Error Establishing a Database Connection😨,我什么都没做啊!我平时不怎么发帖,网站流量也很少。到底哪里出了问题?我完全摸不着头脑!!🤔
我自己调试这个问题彻底失败后,联系了 DigitalOcean 的客服。他们告诉我这是 WordPress 的问题,而不是主机的问题,可能需要提高服务器配置才能解决。但我不想这么做✋。所以我决定寻找更简单的办法。
我是一名 ReactJS 开发者。那我为什么会选择用 WordPress 建网站呢?!嗯,一开始我觉得如果没有编辑器和数据库,博客就根本建不起来。这基本上也是我当初选择 WordPress 的原因。结果证明,我错了。
Markdown 来帮忙了。
Markdown!那是什么?!根据维基百科的解释:A lightweight markup language with plain text formatting syntax. Its design allows it to be converted to many output formats. Markdown is often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor.
你知道readme.md几乎每个Github仓库里都有的那个文件吗?md它代表markdown。
例如,以下 Markdown 代码片段:
# H1 heading
** Bold text **
可以像这样转换成HTML:
<h1>H1 heading</>
<b>Bold text</b>
是不是很酷?!它不只是标题和粗体字,还支持很多其他功能。看看这份速查表吧。
这跟这一切有什么关系呢?🤔
这意味着我们可以用一些 Markdown 文件来代替数据库和编辑器,每篇文章对应一个 Markdown 文件。我们唯一需要的就是那个强大的ReactJS 库,React Markdown它可以解析 Markdown 文件并输出对应的 HTML 代码。
当然,每次发布新文章时,我都需要手动添加 Markdown 文件。不过,如果这意味着我的网站可以用我最喜欢的语言构建,我很乐意这样做Javascript。
现在,网站已经完全使用 ReactJS 构建完成。基本就是这样!⌛
如果你喜欢这篇文章,记得在推特上关注我,这样就不会错过以后的任何文章了。
如果你真的很喜欢这篇文章,请在下方评论区告诉我哦!✍️
与往常一样,
快乐编码 🔥🔥
“ك٣ ك٣٣٠”