Get started building your personal website using GatsbyJS
Showcase your software development skills
This repository gives you the code you'll need to kickstart a personal website that showcases your work as a software developer. And when you manage the code in a GitHub repository, it will automatically render a webpage with the owner's profile information, including a photo, bio, and repositories.
Your personal website is waiting to be personalized, though. It includes space to highlight your specific areas of interest in software development, like languages or industries. And it's standing by to publish your next great blog post.
Fork this repo
You'll be making your own copy of the "personal website starter" repository so you have your own project to customize. A "fork" is a copy of a repository. So select "Fork" atop the
Once you've found a home for your forked repository, it's yours. You're the owner, so you're ready to publish, if you wish.
GitHub Personal Access Token
We need GitHub personal access toke to fetch data and generate content for our website using graphql api. Create personal token for this app. Learn more here.
Note: Do not mark any other permission as we don't require them, we are only granting read permission to our project. DO NOT COMMIT this token.
Install in your local development environment
- Change into your new directory
- Install dependencies
- Build the site and make it available on a local server
GITHUB_TOKEN=YOUR_GITHUB_TOKEN npm run develop
- Now browse to http://localhost:8000
When you host your personal website's code on GitHub, you get the support of free hosting through GitHub Pages.
To host our website on GitHub, we need to create a new branch name
gh-pages and change GitHub Pages source to
gh-pages. You can read out it in details here. Now follow below steps to publish your personal website.
- We run below command to generate static build for our personal website. This command will create public folder with bunch of files-folders for our website.
PATH_PREFIX=/gatsby-github-personal-website GITHUB_TOKEN=YOUR_GITHUB_TOKEN gatsby build --prefix-paths
Now we have our static
public folder, we have to push it
gh-pages branch so that GitHub Pages can host those files and display it as our personal website. To do that, we have a handy
publish script in
package.json. Run below command to push your public folder to
gh-pages branch. Do not forget to build first before publish.
npm run publish
If you want to use a custom domain, you'll want to add it to your repository's "Custom domain" settings on github.com. And then register and/or configure your domain with a DNS provider.
It's your website, and you control the source code. So you can customize everything, if you like. But we've provided a handful of quick customizations for you to consider as you get your website off the ground.
Quick configuration changes
Most customizations can be done in a matter of seconds, by revising your repository's
By default, your website will display in a two-column layout on larger-screen devices, with your photo, name, and basic information displayed in a left-aligned "sidebar." But you can quickly switch to a "stacked" single-column layout by changing the line in your
gatsby-config.js file that reads
layout: sidebar to
By default, your website appears with a "light" white and gray background, with dark text. But you can quickly switch to a "dark" background with white text by changing the line in your
gatsby-config.js file that reads
style: light to
Your website comes pre-configured with three topics (e.g. "Web design" and "Sass") that appear in a section titled "My Interests." These are also stored in your repository's
gatsby-config.js file, where you can define each topic's name and two other optional details:
web_url: The web address you'd like to your topic to link to (e.g.
image_url: The web address of an (ideally square) image that you'd like to appear with your topic.
To add a page to your website (e.g. detailed resume):
- Create a new
.jsfile under pages folder.
- Give it a filename that you want to be used in the page's URL (e.g.
Adding blog posts
To add a blog post to your website:
- Create a new
.mdfile in your repository's
- Give it a filename using the following format:
- At the start of your file, include the following front matter:
--- title: "The title of my blog post" ---
Your website comes with a placeholder blog post that you can reference. Notably, its front matter declares
false, so that it won't appear on your website.
Content and templates
To give you a sound foundation to start your personal website, your repository imports a handful of components that are re-used throughout your website. They're all stored in the
There are the usual suspects, like
seo.js. But there are few more worth pointing out:
interests.js: A heading and dynamic list of "My Interests," which is populated with the topics you list in your
masthead.js: A collection of your avatar, name, bio, and other metadata that's displayed prominently on all your webpages to help identify what the website is about.
postCard.js: A compact, summarized presentation of a blog post, re-used to display a listing of your latest blog posts.
projects.js: A heading and dynamic list of "My Projects," which is populated with a listing of your newest GitHub repositories.
repoCard.js: A compact, summarized presentation of a repository, re-used to display a listing of your GitHub repositories.
thoughts.js: A heading and dynamic list of "My Thoughts," which is populated with a listing of your latest blog posts.
topicCard.js: A compact, summarized presentation of a topic (defined in your
/data/topics.yaml), re-used to display a listing of your interests.
Your repository comes with three layouts:
- default: Not used by any of the built-in pages or posts, but useful for any new pages you create.
- home: Used by your
/pages/index.jshomepage to display listings of your projects, interests, and (optionally) your blog posts.
- post: Used by default by the posts in your
Your website is pre-configured to use GitHub's very flexible CSS framework called "Primer,". It's currently referenced within your
layout.scss file, using the CSS import at-rule:
You are, of course, welcome to remove it or replace it with another framework. Just bear in mind that the HTML that your website came pre-packaged with references multiple Primer "utility classes" to define things like column widths, margins, and background colors.
You also have the option to add on to and extend Primer's styles by adding custom CSS to your
/assets/styles.scss Sass stylesheet. By editing this file, you can customize your website's color scheme, typography, and more.
This project is conversion to JS from original repository. I tried to follow the same file-folder structure as original repository.
The theme is available as open source under the terms of the MIT License.