Freddy Montes Frontend Javascript Developer

Freddy Montes

Costa Rica (GMT-6)

Frontend Developer with a graphic design degree. UX/UI and Javascript crafter. More

How I built my portfolio with Gatsby and ReactJS

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 exactly 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 is super easy to do, just 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:

Lighthouse performance score

GTMextris performance 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.

Repos

Scalable

With Gatsby I can create new pages, pull content from everywhere, in conclusion, add content and feature really easy.

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. Go and check the code: https://github.com/fmontes/fmontes-gatsby, fork it, use it, build your own.