Personal Portfolio and Blog of Ryosuke
A personal portfolio and blog created with the GatsbyJS framework to generate a static React powered website. It's lightning fast, SEO and PWA friendly, and deploys directly to a CDN like Github Pages or Netlify.
- Pagination Archive
- Pagination Archive
- Tag Archives
Post Format / Fields
--- title: Deploy a Static React Blog using GatsbyJS and Github date: "2018-03-21" section: blog cover_image: "./firstname.lastname@example.org" tags: [ 'design', 'development', 'react', 'github', 'gatsbyjs', 'ssg', 'static site generator' ] --- Your post here
- Section can be
- Tags must be array
- Body content can include Markdown or HTML.
To embed Codepen modules, just copy the embed code and remove the JS script that gets imported.
Seamlessly embed Tweets into posts by copying the blockquote portion of the embed code to your Markdown file. Don't copy the linked JS file, the plugin handles that automatically.
Running on GatsbyJS, an SSG that creates static React apps.
npm run develop
We locally build the files, then deploy using an NPM script that updates a specific Git repo branch called
To enable this, just initialize a git repo in the project, commit your changes, and add your Github repo as a remote repo. Make sure to label the remote as
origin, otherwise the Gatsby deploy won't know which repo to push to.
Deploy site to
origin remote repo:
npm run deploy
Creating or editing content
git pullfrom remote origin to ensure you have the latest posts and to merge any conflicts.
- Add a new folder to
src/content/blognamed after your post. This will be converted to the slug of the article -- you don't need to 'kebab-case' your title, but keep the format in mind.
- Create a Markdown file in the folder. Make sure to use previous files as a template to include all the appropriate fields (listed above).
- Fill out the post, make sure to include a cover image (see next step for handling images)
- For any images, include them in the same folder as the post's Markdown and link locally using
<img src="./my-image.jpg" />.
npm run deployin the project root to deploy to Github Pages.
This site is also capable of deploying on Netlify. Simply login to Netlify, create a new app, and point to this repository. Follow the steps, make sure Netlify is running
gatsby build and pointing to the
/public directory. This also allows you to use the Netlify CMS, since it requires a server for OAuth2 support and hosting on Netlify allows you re-build on each edit (rather than building from you personal machine and deploying from there).