Blog

Super powerfully all-packaged blog system

What is this?

This is tubone's Blog by Gatsby and Netlify.

https://blog.tubone-project24.xyz/

Preview

Screenshots from the last deployment on the master branch.

Desktop

Width 1200px

Mobile

Width 400px

Templated by?

Gatsby Starter - Calpa's Blog

Special, thanks!

Features

Structure

• Gatsby.js v4, Static site generating
  • Use Preact, faster than React
  • All Components writen by TypeScript
  • Use Bootstrap5 for CSS Framework
  • Use Sass(Scss) and Scoped by CSS Modules
  • All articles (Datasource) made by Markdown and save to this repository
• For Search Engine Optimization, generate header meta tag and OGP
• High Performance, purge CSS to Bootstrap5, optimise SVG and minify HTML, CSS and JS
• Use Google Analytics v4
• Site inner searching by Algolia search
• Code syntax highlighting by Prism.js
• PWA Support, and prefetch page-data.json
• Deploy Netlify
  • Managed by Terraform Cloud for Netlify settings
• Image hosted by imgur
• OGP is supported. Many sites display header images as OGP images, and Twitter card dynamically generates images highlighting article titles like Zenn or Qiita.
• Use Gitalk for blog comment system
• Icons used by Fontawesome, and optimised to Icomoon
• Sitemap generate
• RSS feed generate
• Compliant with a11y, top page Lighthouse's accessibility score is 100!
• Use Sentry for detecting error and check performance

For Developer

• Use ESLint and stylelint for lint codes
• Use EditorConfig formatting and indent
• Use husky run linter before git commit and push
• Use Jest and React Testing Library for Unit and React Component testing
• Use Snapshot tests for Snapshot tests
• Use Cypress for End-To-End testing
• Components managed by Storybook
  • Generate all preview-deploy and production-deploy
• Each production-deploy is measured by Lighthouse and reports are output
• Each production-deploy is measured by Bundle Analyzer and reports are output
• unused dependencies check by depcheck in depcheck_action
• Update dependencies by Renovate
• Detect browser's memory leaks by memlab
• Detect vulnerability by Snyk
• Detect vulnerability by OWASP ZAP
• Capture some width screenshots every PR and push master.

For contributor of articles

• Post articles in /src/content/*.md, and Create GitHub Pull Request to master branch
  • Deploy netlify in preview environment and check your articles
• Or use Netlify CMS in /admin/
• Use textlint before merge master by GitHub Actions

flowchart TB
CreateMarkdown -->|WriteArticle| PushMarkdown
PushMarkdown --->|CreatePullRequest| DeployPreview
EditArticle --->|PushMarkdown| DeployPreview
DeployPreview --->|CheckArticle| EditArticle
DeployPreview --->|ReviewOthersArticle| Approved
Approved --->|Merge| DeployProduction

How to develop?

Running at local

Run at local, execute commands below, and access http://localhost:8000

yarn install
yarn start

Build

Or Build Artifact, execute commands below

yarn build

lint, format codes

Fix your code format by TSC, ESLint and stylelint

yarn typecheck
yarn format:fix
yarn format-style:fix

You can also fix YAML format by yamllint

yarn format-yml

Testing

Testing React Component and Unit testing, execute commands below

And also, you can test Storybook Snapshot test!

yarn test
yarn test:storybook
yarn test:e2e

If you want to check testing coverage, execute commands below

yarn test:cov

And also, check your coverage report on PR with Coveralls.

And more, you can check production test coverage report below.

• jest test report
  • https://tubone24.github.io/blog/cov/index.html
• cypress e2e test report
  • https://tubone24.github.io/blog/e2e-cov/index.html

Cleaning

If you error occurred on gatsby build, execute commands below

$ yarn build
....
....
Error loading a result for the page query in "/". Query was not run and no cached result was found.

$ yarn clean

Also, you want to clean dependencies, execute commands below

yarn clean-all

Update Browsers List

This project use Browsers List, so you can update it

yarn browserslist:update

benchmark (Lighthouse)

If you want to check benchmark, you can use Lighthouse script below

yarn benchmark "https://blog.tubone-project24.xyz" $(git rev-parse HEAD)

Storybook

If you want to check storybook, execute commands below

yarn storybook

memlab

If you want to detect browser's memory leaks, you can use memlab script below

yarn memlab

Or if you want to test against a specific URL, set an environment variable.

URL=https://63ad31c571f88e60f37399ec--pensive-lamport-5822d2.netlify.app yarn memlab

And also, creating PR, you can check memory leak report via GitHub PR Comments.

Environment variables

Copy .env.example to create the .env file

cp .env.example .env

Key	Description	Default
GATSBY_ALGOLIA_ADMIN_API_KEY	Algolia search's ADMIN API KEY, use index post content	-
GATSBY_ALGOLIA_APP_ID	Algolia search's APP ID	-
GATSBY_ALGOLIA_INDEX_NAME	Algolia search's index name	posts
GATSBY_ALGOLIA_SEARCH_API_KEY	Algolia search's search API KEY, use view search on site	-
STORYBOOK_ALGOLIA_APP_ID	Algolia search's ADMIN API KEY, use index post content	-
STORYBOOK_ALGOLIA_INDEX_NAME	Algolia search's APP ID	posts
STORYBOOK_ALGOLIA_SEARCH_API_KEY	Algolia search's index name	-
GATSBY_GITHUB_CLIENT_ID	GitHub oAuth Client ID, use Gitalk	-
GATSBY_GITHUB_CLIENT_SECRET	GitHub oAuth Client Secret, use Gitalk	-
FAUNADB_SERVER_SECRET	FaunaDB's Secret, use FaunaDB	-

CI/CD

This repository uses GitHub Actions as CI. There are two workflows, one for preview deployments and one for production deployments.

Code with Codesandbox

Use the button below to code with the blog system:

Storybook

The components used in my blog are managed using Storybook.

https://blog-storybook.netlify.app/

Lighthouse

After production deploy, Run and report Lighthouse.

https://tubone24.github.io/blog/lh/report.html

Also, create PR, Check Lighthouse score via pagespeedapi.runpagespeed and Comment your PR.

Bundle Analyzer

After production deploy, Run and report Bundle Analyzer.

https://tubone24.github.io/blog/ba/index.html

Deploy at Netlify

Push the button below.

textlint

I use textlint to proofread my blog text.

yarn textlint

Infrastructure

Change Netlify Config

Use Terraform Cloud to change Netlify configuration values.

Workspace

Alert monitoring

Use Sentry

Automatic security and vulnerability check

Detect credentials leak

There is a security risk of credentials getting into the code, but we use Gitguardian to check each PR to make sure they are not mixed in.

API Based

API request based security check is used by Brightsec

static code analysis for vulnerability

We use Snyk for static code analysis. In addition to detecting vulnerabilities in the libraries used, we scan code and IaC tools.

If you create PR, check security vulnerability for snyk CLI and push PR comment.

OWASP ZAP

OWASP ZAP Full Scan can be run securely against a locally built Docker container.

The results can be viewed at the following URL

https://tubone24.github.io/blog/owasp/report.html

Full Scan of OWASP ZAP has a very long execution time, so manual execution with workflow_dispatch is recommended.

CI Healthy

Last 14 days, CI Score by meercode.io

CI Score

CI Count

CI Success Rate

Change log and versioning

This Blog's CHANGELOG integrated GitHub Releases

And this blog's versioning policy is semver like 1.0.1

• MAJOR version when you make incompatible API changes
• MINOR version when you add functionality in a backwards compatible manner or create articles.
• PATCH version when you make backwards compatible bug fixes or update (include delete) articles.

License

• The source code under the MIT LICENSE.
• src/content under the CC-BY