97.7% JavaScript 模板博客网站

2025-06-08

97.7% JavaScript 模板博客网站

你好👋

/// 注意❗ 这将是一篇很长的文章

有关🌩️快速启动和运行项目的说明，请遵循 repo 上的👇 README

README.md正如本 repo页面所述
，本文将提供关于如何将这个特定项目变成您自己的项目的详细信息和说明。
即，根据您的需要进行修改（使其成为您自己的个人博客或作品集页面），了解哪些部分应该和不应该修改，
如何在本地运行和开发它，这样做的先决条件，如何使用免费托管服务（如 GitHub 页面和 netlify）部署它，如何
更改这些服务的默认域名并应用您自己的自定义域名，并最终足够熟悉它，以便您可以
通过从中实现的东西来为它做出贡献，Project Roadmap如果您愿意的话！😀

Netlify 状态
开源
许可证：MIT

😰 卡住了吗？

尝试在 GitHub 上提交问题，友好的人们可以尝试提供帮助。

🏇 让我们开始吧

但首先，让我自拍一张🤳

好的，不。

首先，我们需要讨论一下为了在本地开发环境 中启动并运行该项目，您的机器上需要安装哪些程序。

但是什么是本地开发环境？

本地开发环境允许您在自己的计算机上运行项目的精确副本。此外，借助Git，您还可以将本地副本与在线发布的副本同步。

换句话说，你——以及任何你想与之合作的人——都可以在自己的电脑上，对你的程序进行修改、修复，然后再进行进一步的修改。在向公众发布新版本（希望是改进的版本）之前，你可以自由地进行测试和修改，尽情享受。

⬇️ 您需要安装哪些软件程序

🦁 的博客使用一款名为Eleventy (11ty)的程序来搭建网站。Eleventy 是一种被称为静态网站生成器的程序，它基本上会在您每次保存更改时构建一个全新的网站副本。🦁
的博客和 Eleventy 都运行在一个名为Node.js的程序上。Node.js 为您提供本地JavaScript 运行时环境，这意味着您可以在计算机上使用用 JavaScript 编写的软件。
在 ​​Node.js 等程序出现之前，JavaScript 几乎局限于浏览器。但现在，有了 Eleventy，您可以使用同一种编程语言来运行服务器、编写内容、生成网站并与用户互动。

这三个程序——Node.js、Eleventy 和🦁的博客——都是免费开源软件(FOSS)，这意味着代码是公开可用的。
事实上，我们鼓励你重新组合你自己的本地副本，用它创造一些新的、有价值的东西，甚至对原始源代码提出修改建议。

在进入安装部分之前，我首先建议您尝试熟悉使用所谓的😱终端。

artix桌面

💻 访问你的终端

每个操作系统（Windows、macOS、Linux 等）都附带基于文本的命令行界面（CLI、控制台或终端），用于输入您希望计算机运行的命令。CLI
是一个强大的工具，可用于与您的个人工作站进行交互，超越您可能更熟悉的图形用户界面 (GUI)。
当然，如果您曾经使用过没有鼠标或触控板的计算机，那么您可能会觉得在命令行中输入127.0.0.1
很合适。 您无需使用鼠标或触控板🖱️“指向并点击”，而是可以通过键盘⌨️与计算机“对话”。
键盘命令是一种非常富有表现力且高效的方式，可以完成许多通常超出 GUI 范围的任务。

更简单的方法是，在 Google 上搜索一个你可能想要安装的程序，然后点击、滚动、拖动、输入内容，或者，

简单地说，通过提供您想要安装的程序的名称，在您的终端仿真器上编写一个命令，然后让它为您完成它的工作？

以下是一些最流行的操作系统预装的命令行工具列表：

如果您使用的是 Windows，那么我假设您能够访问较新的基于 Linux 的 Windows 终端来输入命令。

⌨️ 输入命令

现在您已经了解了终端的用处以及如何访问它，您可以开始学习使用命令行界面了。
要学习的一些最重要的技能包括列出文件夹或“目录”的内容以及从一个目录移动到另一个目录。
许多命令取决于您当时工作的目录。
您可以使用ls命令列出当前“工作目录”中的文件。
同样，您可以使用cd命令从一个目录更改
到另一个目录： 仅键入cd将更改为目录树中的顶级目录（通常称为主🏡目录）。
要从当前目录向下⬇️📂转到其中的一个目录，您可以键入，cd后跟要打开的目录的名称。
例如cd ./Downloads。
要从当前目录向上cd ../⬆️📂转到其外部的另一个目录，您可以键入。
此命令将从当前目录向上一级，例如，从Downloads备份到您刚刚进入的目录。
您可以根据需要重复该序列../多次。假设您想上升两级：您可以输入cd ../../。

一旦您可以轻松列出目录的内容并从一个目录移动到另一个目录，您就拥有了开始设置本地开发环境并通过它安装所有程序所需的基本命令行技能，
我们将从现在开始讨论这些程序😶。

⬇️ 安装 git

我强烈建议你学习一下什么是版本控制。
一旦你学习了，我再次强烈建议你学习使用并尽可能熟悉git版本控制系统。

Git 用途广泛，对于软件工程师（以及其他领域）来说，它是一项非常强大的工具和技能。
你也需要它来在你的机器上运行这个项目！🦁

以下 2 个指南是官方
指南，可能是最好的指南，它们 根据您使用的操作系统简单、清楚地解释了如何安装 git 。

📚 学习 git

以下👉GitHub git 指南是一个非常好的指南，可以帮助您开始学习 git 以及如何将其与GitHub等 git 在线服务相结合。

但是，您也可以使用基于浏览器的在线👉游戏来吸引您的注意力，同时深入了解其更高级的部分。

现在您已经熟悉了 git 和 GitHub，是时候从它的仓库中获取🦁的博客副本了。
或者您也可以 fork 它，然后从您自己的 fork 中使用 git clone 进行克隆。

这样做的过程就像这样👇（但我确信此时你已经知道如何去做了，这只是使用asciinema 的一个借口）。

克隆博客说明 gif

好的，下一步是什么？

⬇️ 获取 Node.js

现在我们已经在我们的机器上本地克隆了项目，我们需要 Node.js 来让它在我们的本地开发环境中运行。

这又取决于您使用的操作系统，但您可以通过此👉链接按照官方说明进行操作。

此时，我将提供一些我个人认为最有效的说明，以便在 Linux 操作系统上（无论您使用哪种发行版）获取最新稳定版本的 Node.js 和 npm。

/// 注意❗
以下说明可能看起来有点高级或复杂，但其实不然。仔细阅读并遵循，你应该可以顺利开始。

ℹ️ 关于

nvm 是node.js的版本管理器，旨在按用户安装，按 shell 调用。nvm\适用于任何符合 POSIX 标准的 shell（sh、dash、ksh、zsh、bash），特别是在以下平台上：unix、macOS 和 windows WSL。

⬇️ 安装和更新脚本

要安装或更新nvm，您应该运行[安装脚本]

> $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
Enter fullscreen mode Exit fullscreen mode 
> $ wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
Enter fullscreen mode Exit fullscreen mode

运行上述任一命令都会下载并运行一个脚本。该脚本会将 nvm 存储库克隆到~/.nvm\，
并尝试将以下代码片段中的源代码行添加到正确的配置文件（~/.bash_profile\、~/.zshrc\、~/.profile\或~/.bashrc\）。

❗ 以下是一个命令，请将其整个复制粘贴。

> $ export NVM_DIR="$([ -z "\${XDG_CONFIG_HOME-}" ] && printf %s "\${HOME}/.nvm" || printf %s "\${XDG_CONFIG_HOME}/nvm")"
> [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
Enter fullscreen mode Exit fullscreen mode

🗒️ 附加说明

  • $XDG_CONFIG_HOME\如果存在环境变量，它会将nvm\文件放在那里。

  • 您可以添加--no-use\到上述脚本的末尾（... nvm.sh --no-use\）以推迟使用，nvm\
    直到您手动use\使用它。

  • NVM_SOURCE\您可以使用、NVM_DIR\、PROFILE\和变量自定义安装源、目录、配置文件和版本NODE_VERSION\。
    例如：curl ... | NVM_DIR="path/to/nvm"\。确保NVM_DIR\不包含尾部斜杠。

  • 安装程序可以使用git\、curl\或wget\来下载nvm\（无论哪个可用）。

🧰 Linux 上的故障排除

在 Linux 上，运行安装脚本后，如果nvm: command not found\
在终端中输入 后没有收到任何反馈command -v nvm\，只需关闭当前终端，
打开一个新终端，然后再次尝试验证。
或者，您也可以在命令行中针对不同的 Shell 运行以下命令：

重击：source ~/.bashrc\

zsh：source ~/.zshrc\

ksh：. ~/.profile\

这些应该接收nvm\命令。

☑️验证安装

要验证 nvm 是否已安装，请执行以下操作：

> $ command -v nvm
Enter fullscreen mode Exit fullscreen mode

nvm\如果安装成功，应该会输出以下内容。请注意，这which nvm\将不起作用，因为nvm\
它是一个源shell函数，而不是可执行二进制文件。

⬇️ 使用 nvm 安装 node

要获取最新的 LTS 版本的 node 并迁移现有安装的软件包，请使用

> $ nvm install 'lts/*' --reinstall-packages-from=current
Enter fullscreen mode Exit fullscreen mode


那么只要有随附的 npm 包管理器，您的系统上就应该拥有最新且稳定的 nodejs 版本。

✅ 验证安装：

> $ node -v
Enter fullscreen mode Exit fullscreen mode 
> $ npm -v
Enter fullscreen mode Exit fullscreen mode

至此，我们的系统上已经有了 Node。现在终于可以在本地运行我们的项目了。

进入项目目录（如克隆后上面之前的 gif 所示），然后：

⬇️ 使用 npm 安装项目依赖项

> $ npm install
Enter fullscreen mode Exit fullscreen mode

🏃 在本地运行项目并前往浏览器查看

> $ npm run dev
Enter fullscreen mode Exit fullscreen mode

打开浏览器并在地址栏中输入：

> http://localhost:8080/
Enter fullscreen mode Exit fullscreen mode

以下是演示上述说明的视频：

asciicast

恭喜❣️经过这一切🎉您成功在您的机器上本地运行该项目！

因此，我们设法安装了所有依赖项，了解了 git、GitHub 和版本控制以及其他一些内容，
并在我们的本地开发环境中在我们的机器上运行了该项目。

您可能会问，下一步该怎么做？

好吧，首先要做的就是亲自动手，深入研究项目本身，进行实验和尝试。
由于该项目完全使用 🍦 JavaScript 编写，如果您还不熟悉 JavaScript，可能需要学习一些，
这样您就可以更轻松地理解代码本身。如前所述，该项目本身拥有丰富的文档，
既可以在 GitHub 仓库中找到（每个仓库中都有一个单独的 README.md 文件，解释重要知识点），
也可以在代码本身中找到内联文档！

因此，了解 JavaScript 编程语言的一些基础知识、阅读可用的文档并试用/试验代码本身，
您就可以开始了！

/// 注意❗在我的 👉 GitHub 仓库
中 ，你可以找到 JavaScript 编程语言的基础知识，这些内容以教程的形式编写
，可以帮助你在阅读的同时熟悉并学习它。
目前，它的写作风格比较快，细节也不是很丰富，但我确实计划将其制作成一本免费的电子书，
专门用于学习 JavaScript 编程语言并尽可能深入地探究它。
所以，敬请期待📻！

现在，由于这篇博文已经变得很长，我想快速提一下您可能想对该项目做的最后两件事。

首先，你可能需要对它进行一些自定义，使其更加个性化。
正如上文所述，你需要亲自动手才能做到这一点，但作为快速参考，你可以尝试以下方法：

  • 📝./_data/site.json使用您的网站信息进行编辑。别担心。您可以更改单引号内的任何文本，而不会破坏任何内容 ( 'Safe to edit')。如果您遇到困难，请在 GitHub 上提交问题，以便有志之士提供帮助。
  • （可选）📝.eleventy.js使用您的配置偏好进行编辑。
  • ❌ 删除/shortcdes/getting-started.js文件中 return 语句后的引号内的内容。
  • 基本上，这就是您在主页上看到的终端。如果您想保留它，但输入您自己的信息，请打开文件并编辑.then()方法中的文本。
  • 否则，您可以将其完全删除并在返回语句的反引号内写入 markdown，或者编写您想要的任何 HTML、CSS、JavaScript，就像我已经做的那样。

在 和./content/pages中，您可以编辑或删除任何以或扩展名./content/posts/结尾的文件。 要创建新页面或帖子，我建议您将其中一个文件复制并粘贴到新页面或帖子中，直到您掌握使用方法为止。.11ty.js.md

要在浏览器中预览更改，您必须像上面一样运行项目。（参见终端视频）👆

只需运行：

> $ npm run dev
Enter fullscreen mode Exit fullscreen mode

然后在浏览器中访问http://localhost:8080/

为了发布您自己的项目副本以及使用您自己的自定义域名，
我将在单独的博客文章中写出详细的说明，并在完成后在此处引用，
因为这已经足够大了。

如需快速参考，您可以查看👉这里

或者使用以下按钮👇，它将在您自己的 GitHub 个人资料上创建存储库的分支，并将该分支直接发布到您的 netlify 帐户，您必须通过您的 GitHub 个人资料登录该帐户。

部署到 Netlify

喜欢这篇文章吗？你喜欢这个项目吗？从中学到什么了吗？

如果是这样，

GitHub页面上的 ⭐将会非常有帮助，非常感谢！

谢谢。🙏

©2021 <Andreas><\Pappas>

鏂囩珷鏉ユ簮锛�https://dev.to/andrewpap22/a-97-7-javascript-template-blog-website-3onc
Devto 翻译
PREV
像我五岁一样解释 MVC
NEXT
算法练习：二和 为什么要用算法？ 问题：二和 我的初始解决方案 改进我的方法 编写替代方案 结论