第1部分在这个系列中,我介绍了使用今天可用的一些很棒的工具和平台来开源博客。我还分享了自己的设置,以便您可以看到结束结束的内容。

我不久,我会提供您自己需要使用自己的博客网站所需的一切详细演练。

本地博客开发

首先,我们需要通过安装几个依赖项来为博客站点设置我们的本地开发环境。

  • 由于我正在运行曲面书2,因此这些说明适用于Windows 64位操作系统,但可以根据需要修改以适合宏或Linux。

第2部分部署计划

接下来…

  • 我们将安装vscode.
  • 我们将安装Git.
  • 我们将安装红宝石jekyll
  • 我们会克隆一个jekyll主题到本地文件夹并预览网站

已经安装了Visual Studio代码或Git?- >在继续本指南之前更新到最新版本。

  • vscode -转到帮助>检查更新从您的vscode客户端从最新版本更新。
  • git - 使用git更新 - git-for-windows从您的Git客户端更新到最新版本。

第1步 - 安装Visual Studio代码

  1. https://code.visualstudio.com/download.
  2. 下载并运行Windows(X64)安装程序〜57MB。
  3. 在安装向导期间接受所有默认值。这里没有令人兴奋!

第2步 - 安装git

  1. 让你的路https://git-scm.com/downloads.
  2. 下载并运行Windows(x64)安装程序〜44MB。
  3. 在安装向导期间 -确保从下拉下来选择Visual Studio代码作为Git的默认编辑器(如下所示)。
  4. 所有其他安装默认值似乎都很好,可以留下!

确保选择Visual Studio代码为Git的默认编辑器

第3步 - 安装Ruby / Jekyll

  1. 前往https://rubyinstaller.org/downloads/
  2. 下载并运行Ruby + Devkit 2.6.x(x64)安装程序〜132MB。
  3. 在安装向导期间接受所有默认值。
  4. 点击结束在完成安装向导时。
  5. 安装向导后,将自动显示新的CMD窗口并显示3x选择 - 确保在数字中键1在击中之前进入接着说。
  6. 如果一切顺利,您应该看到一个屏幕,说安装了MSYS2。随意关闭它。
  7. 现在已经结束了,打开VSCode客户端和一个新终端(Ctrl + Shift +`)
  8. 接下来我们需要安装jekyllBundler.具有以下CMDLET的RubyGems:
    • $ gem安装jekyll bundler
  9. 如果您遇到问题,请尝试从上面的步骤2开始重新安装Ruby + Devkit。

下载并运行Ruby + Devkit 2.6.x(x64)安装程序

在安装向导期间接受所有默认值。

在安装向导期间接受所有默认值。

单击“完成”。

在击中ENTER继续之前,请务必在第1号码中键入。

如果一切顺利,您应该看到一个屏幕,说安装了MSYS2。随意关闭它。

我们需要使用以下cmdlet安装Jekyll和Bundler RubyGems:$ Gem安装Jekyll Bundler

如果您遇到问题,请尝试从上面的步骤2开始重新安装Ruby + Devkit。

第4步 - 使用社区主题 - 最小错误

我们希望今天博客 - 不是下周或一个月后。那么让我们克隆/叉子对我们本地开发环境的现有Jekyll主题。然后,我们可以修改它以满足我们的需求,而不会重新发明轮子!

顺便一提!默认的Jekyll主题是最小并且似乎很快就可以快速证明概念。由于与其他主题相比,我不建议与它一起生活。您可以通过从vscode终端执行以下cmdlet来检查:

$ jekyll新的my-awesome  - 网站
$ cd my-awesome - 网站
$ Bundle Exec Jekyll服务

成功的服务后 - 浏览http:// localhost:4000将显示像这样的主页。

Jekyll默认主题(最小值)

目前我正在使用最小的错误迈克尔玫瑰是因为它适合我的需求,因为迈克尔的有用文档可用 - 例如退房https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/

最小的错误主题开始最快的方法是git clone.或者git fork.以下GitHub存储库之一。

让我们来看看这是如何与之合作的远程主题

尝试从vscode终端执行以下cmdlet:

$ CD C:/
$ git clone https://github.com/mmistakes/mm-github-pages-starter
$ CD mm-github-pages-starter /
$ Bundle Exec Jekyll服务

成功的服务后 - 浏览http:// localhost:4000将显示像这样的主页。

Jekyll社区主题(MMistakes)

打开新创建的文件夹C:\ mm-github-pages-starter从vsode访问以下站点结构。

MMistakes网站结构

这是你上面所看到的崩溃。在此处将在此处发生大部分更改,因此很重要。

  • _数据包含一个.yml文件,该文件控制页面顶部可见的站点导航链接。在向您的网站添加/删除页面时修改Navigation.yml文件。
  • _pages.包含的。网站使用的Markdown文件,例如404和关于页面。修改此文件夹中的现有页面或创建新的页面以满足您的需求。
  • _Posts.包含作为新帖子发布到网站的Markarddown文件。将新帖子放入此文件夹中。
  • _地点是Jekyll在本地发布之前建造和存储了该站点的位置。您可以忽略此文件夹。
  • 资产\图像包含站点和页面/帖子使用的图像文件。将PNG / JPEG / BMP / GIF文件保存到此文件夹中,并引用Markdown中的路径。
  • _config.yml.是jekyll在使用bundle执行jekyll服务后构建站点的主要配置文件。首先修改此文件以更新密钥属性/变量,然后重新运行Jekyll用于查看本地更改。
  • .gitignore.包含您不希望通过Git与GitHub存储库同步的文件或文件夹。如果在稍后添加_drafts文件夹,请在稍后添加_drafts文件夹,以便您不希望将同步到Github中的帖子。
  • 吉他美用于定义为该站点加载的RubyGems。根据需要修改此文件以更改插件。
  • gemfile.lock.lock.是您使用后出现的jekyll自动生成文件Bundle Exec Jekyll服务- 你可以忽略它。
  • index.html.为网站主页定义一些Yaml正面问题。无需修改此文件。
  • readme.md.是对作者迈克尔玫瑰写的远程主题的有用介绍。

下一步

  • 审查和更新config.yml.
  • 创建一些博客帖子进入_Posts.文件夹。
  • 将自己的图像添加到资产\图像文件夹并将其引用到帖子中使用![%ImageDescription%](/资产/图像/%filename%)。
  • 创建您自己的页面或更新现有_pages /约..
  • 运行捆绑EXEC JEKYLL服务看结果!

搭档

我们已经完成了我们的开源博客依赖关系的安装到我们本地的开发环境,并克隆/服务了Jekyll主题。

第2部分部署计划完成!

恭喜迈出了这一点!

加入我第3部分在这个系列中,我们将看到博客与github和github页面一起生活。

加入我参加本系列的第3部分,我们将看看博客生活GitHub.GitHub.页面。