👔 JAMstack (Gatsby JS) content-focused portfolio blog starter. Features include dark-mode, installable PWA, SEO, code highlighting, form, CI/CD.
MIT License
Prerequisites include Node.JS v13 and Gatsby CLI. See Gatsby's Development Environment Setup documentation for more details or issues with initial project installation.
nvm install 13
nvm use 13
npm install -g gatsby-cli
Install Project
Create new site using gastby new
command, doing it this way will also install the project dependencies.
gatsby new gatsby-minimal-portfolio https://github.com/BrianRuizy/gatsby-minimal-portfolio
Alternatively, you can manually clone the repository and install dependencies by running npm install
.
Start Developing
Navigate into your new site’s directory and start it up using gatsby develop
command.
gatsby develop
DONE - Compiled successful
You can now view Brian-Ruiz-Portfolio in the browser.
http://localhost:8000/
Using this portfolio website and adding your own content is super simple! Add your respective project markdown-file to the _data
folder, and Gatsby + GraphQL + Remark does the rest of the work rendering the markdown file to html. Same applies for site metadata, add your own content to site-meta-data.json
.
See _data/readme.md for examples on .md syntax, or brianruizy.com/markdown-help/.
Netlify currently has built in support for GitHub. You gain the ability to redeploy the site by pushing the code to the respective repository, with no need to manually rebuild and upload every time you make changes. See Gatsby's docs for more detail.
Login to Netlify.com and you will see a New site from git
button at the top right corner of the screen. Click on it and connect with the same git provider that you used to host your website and authorize Netlify to use your account.
Choose your website repository
and it will take you to deploy settings with the below options.
Click on the Deploy site
button and Netlify will start the build and deploy process you have specified. You can go to the Deploys
tab and see the process unfold in the Deploy log. After a few moments, it will give you the live site URL, e.g., random-name.netlify.com.
This site's Web design was made possible thanks to these awesome packages / plugins!
Function | Package + Link |
---|---|
UI Library | react-bootstrap / MaterialUI |
Dark Mode | gatsby-plugin-dark-mode |
Syntax Highlighting | gatsby-remark-prismjs |
UI element(s) | react-bottom-drawer |
Icons | react-icons |
Fonts | google-fonts, rfs |