DevBlog 是一个完全可定制的博客模板,专为想要进入博客的开发人员(或任何其他人)而设计。它已准备好进行部署(轻松),或者可以根据您的喜好进行编辑和扩展。该博客是通过 GatsbyJS 完全静态生成的,具有开箱即用的语法突出显示(通过 PrismJS),并且内置服务器端渲染等。
要观看现场演示,请单击此处。
config.js
文件自定义第一步是在本地安装 GatsbyJS CLI。这可以通过运行命令npm install --global gatsby-cli
来完成
创建新的 Gatsby 站点时,CLI 允许您指定启动器,在本例中只需提供此存储库的 URL。这可以通过运行命令gatsby new YOUR_BLOG_NAME https://github.com/RyanFitzgerald/devblog
来完成
现在您已完成设置,您可以简单地使用博客或根据需要进行编辑。例如,运行gatsby develop
来启动 localhost:8000 上可用的热重载开发环境,或运行gatsby build
来构建优化的生产版本。有关 Gatsby 的 CLI 命令的完整列表,请查看他们的文档。
或者,如果您希望简单地分叉此存储库或克隆它,那么您只需运行npm install
,然后运行gatsby develop
即可启动并运行。
基本配置可以通过项目存储库根目录中的config.js
文件完成。通过此文件,您可以编辑博客的主要颜色、添加博客作者和描述等等。默认值如下:
export default {
title : 'Dev Blog' , // Required
author : 'Ryan Fitzgerald' , // Required
description : 'Full-stack Web Developer' ,
primaryColor : '#3498db' , // Required
showHeaderImage : true ,
showShareButtons : true ,
postsPerPage : 5 , // Required
social : {
website : 'https://ryanfitzgerald.ca' ,
github : 'https://github.com/ryanfitzgerald' ,
twitter : 'https://twitter.com/ryanafitzgerald' ,
linkedin : 'https://ca.linkedin.com/in/ryanafitzgerald'
}
} ;
注意:出于基本演示目的,需要标记为“必需”的任何配置选项。如果您不希望使用任何没有“必需”注释的内容,则可以将其删除。
上面引用的配置变量的使用方式如下:
多变的 | 使用说明 |
---|---|
标题 | 博客的标题。这主要用于页面标题。 |
作者 | 该博客的作者。这用于标题名称和页面标题。 |
描述 | 作者的描述。这用于作者下方的标题。 |
原色 | 博客的主色。 |
显示标题图片 | 标记是否显示标题图像。 |
显示共享按钮 | 标记是否在每个博客文章上显示社交媒体共享按钮。 |
每页帖子数 | 博客主页上每页的帖子数。这用于分页。 |
社会的 | 博客作者的社交媒体资料。目前仅支持个人网站、GitHub、Twitter 和 LinkedIn。 |
要更改默认标题图像,只需覆盖/src
文件夹中的main.jpg
文件即可。
要更改默认的图标,只需覆盖/src
文件夹中的favicon.ico
文件即可。
所有博客文章都可以在/src/pages
中找到,并且在运行gatsby build
命令后静态构建。要创建新帖子,只需在/src/pages
中创建一个新文件夹,并使用您想要的网址名称。例如,如果您希望 url 显示为myblog.com/hello-world
您可以将文件夹创建为hello-world
。创建文件夹后,只需在其中创建一个index.md
文件即可。
页面顶部必须包含相同的降价,告诉 Gatsby 有关特定帖子的所需信息。基本模板是:
---
title : New Beginnings
date : " 2018-07-01 "
featuredImage : ' ./featured.jpg '
---
This top portion is the beginning of the post and will show up as the excerpt on the homepage.
<!-- end -->
在上面的代码片段中,所需的只是标题和日期。特色图像是可选的,只需将图像添加到您刚刚创建的页面文件夹并像上面的示例一样引用即可添加。摘录部分也是可选的,如果您不使用<!-- end -->
标记,帖子的第一位将自动用作摘录。
该模板附带 3 个博客文章示例,其中包含从代码片段使用、插入图像、使用特色图像和摘录等内容。
一旦您准备好部署博客并使其上线,您就有几个可用的选项。
手动部署博客只需要运行gatsby build
即可创建生产构建。之后,您可以使用通常使用 React 应用程序的任何服务器,例如 Digital Ocean Droplet 或 AWS 实例。所需要的只是某种方式来提供静态文件。
如果您不熟悉部署 React 应用程序,还有许多其他选项。
为了部署到 GitHub 页面,您需要首先在gatsby-config.js
中设置路径前缀。默认值为pathPrefix: '/devblog'
但应将其更改为您选择的存储库名称。例如,如果您的博客位于https://github.com/YOURUSERNAME/myblog
并希望将其部署到https://YOURUSERNAME.github.io/myblog
,那么您可以将路径前缀设置为pathPrefix: '/myblog'
。
接下来,只需运行npm run deploy
即可部署您的博客。
或者,如果您希望将其部署到https://YOURUSERNAME.github.io
(即您的用户/组织站点而不是项目站点),则需要进行一些额外的更改。 Gatsby 官方文档在这里对它们进行了很好的概述。
部署博客最简单的方法之一是使用 Netlify。要部署到 Netlify,只需单击下面的按钮并按照提示操作即可。
上述选项并不是您可用于部署博客的唯一选项。 Gatsby 官方文档详细介绍了许多其他选项。要了解有关部署选项的更多信息,请单击此处。
根据 MIT 许可证获得许可。有关更多信息,请参阅 LICENSE.md。