Super powerfully all-packaged blog system
This is tubone's Blog by Gatsby and Netlify.
https://blog.tubone-project24.xyz/
Screenshots from the last deployment on the master branch.
Width 1200px
Width 400px
Special, thanks!
/src/content/*.md
, and Create GitHub Pull Request to master branch
/admin/
flowchart TB
CreateMarkdown -->|WriteArticle| PushMarkdown
PushMarkdown --->|CreatePullRequest| DeployPreview
EditArticle --->|PushMarkdown| DeployPreview
DeployPreview --->|CheckArticle| EditArticle
DeployPreview --->|ReviewOthersArticle| Approved
Approved --->|Merge| DeployProduction
Run at local, execute commands below, and access http://localhost:8000
yarn install
yarn start
Or Build Artifact, execute commands below
yarn build
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 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.
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
This project use Browsers List, so you can update it
yarn browserslist:update
If you want to check benchmark, you can use Lighthouse script below
yarn benchmark "https://blog.tubone-project24.xyz" $(git rev-parse HEAD)
If you want to check storybook, execute commands below
yarn storybook
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.
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 | - |
This repository uses GitHub Actions as CI. There are two workflows, one for preview deployments and one for production deployments.
Use the button below to code with the blog system:
The components used in my blog are managed using Storybook.
https://blog-storybook.netlify.app/
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.
After production deploy, Run and report Bundle Analyzer.
https://tubone24.github.io/blog/ba/index.html
Push the button below.
I use textlint to proofread my blog text.
yarn textlint
Use Terraform Cloud to change Netlify configuration values.
Use Sentry
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 request based security check is used by Brightsec
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 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.
Last 14 days, CI Score by meercode.io
This Blog's CHANGELOG integrated GitHub Releases
And this blog's versioning policy is semver like 1.0.1