How I built my portfolio with Gatsby and ReactJS

Freddy Montes|July 09, 2019

My personal site needs some love for a while now, the last commit on it was on Apr 3, 2016. So I need a new site, and I need it fast, and that's precisely where Gatsby helps me.

What I want

1. Blazing fast site
2. Easy to publish a blog post with code highlights
3. Showcase specific GitHub repos
4. Scalable and easy to keep updated

Create a Gatsby site

You only need two commands:

npm install -g gatsby-cli
gatsby new site-name https://github.com/gatsbyjs/gatsby-starter-blog

With Gatsby you can startup a site in no time. Since it has the concept of starters you can pick from hundreds the one that matches your project. In my case it was gatsby-starter-blog.

gatsby-starter-blog

This starter has some important plugins installed, so out of the box, I got:

1. Blog post with markdown files
2. Offline support
3. Progressive Web App ready
4. SEO enhancements
5. Responsive images
6. Google Analytics
7. Vertical rhythm typography
8. prismjs for code syntax highlight

What I added

1. Styled components
2. Lazy load image inside markdown files with gatsby-remark-lazy-load and lazines (this is a must for performance).
3. Github Repo Showcase with gatsby-source-github-api and this GraphQL Query:

    {
        search(query: "fmonteslab user:fmontes", type: REPOSITORY, first: 100) {
            edges {
                node {
                    ... on Repository {
                        name
                        url
                        homepageUrl
                        description
                        createdAt
                        pushedAt
                        primaryLanguage {
                            id
                            name
                        }
                        repositoryTopics(first: 100) {
                            edges {
                                node {
                                    topic {
                                        name
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

Deploy to Netlify

Netlify is one of the best (if not the best) place to deploy your Gatsby site. And it is super easy to do, follow this steps.

What I got

Fast site

Gatsby takes care of everything, cache, minification, lazy load your images, etc. I had to do some work to improve SEO, like hit areas and aria-labels in some buttons for better score:

Blog posts easy to publish

I just need to create a markdown file in my /content/blog folder, commit, push, and Netlify will deploy the site with the new post.

My GitHub repos

When I tag one of my repos with #fmonteslab, I redeploy my site and will be published.

Scalable

With Gatsby, I can create new pages, pull content from everywhere, and quickly add content and features.

More to come

1. SEO work
2. Post post and post more
3. Connect with Linked In API to create a dynamic resume
4. Sky is the limit

Conclusion

I'm very happy with the results of my site. I'll keep it updated and get. Please go and check the code: https://github.com/fmontes/fmontes-gatsby, fork it, use it, build your own.

Thank your read this blog post. Any feedback or question hit me up on Twitter.

Tweet Me