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.
It's all possible using the combination of Jekyll (for building your website), GitHub Pages (for hosting your website), and GitHub's API (for automatically populating your website with content).
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 github/personal-website repository.
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.
If you want to manage your website in a local web development environment, you'll be using Ruby.
Once you've found a home for your forked repository, clone it.
Jekyll is a Ruby Gem that can be installed on most systems.
- Install a full Ruby development environment
- Install Jekyll and bundler gems
gem install jekyll bundler
- Change into your new directory
cd personal-website
- Install missing gems
bundle install
- Build the site and make it available on a local server
bundle exec jekyll serve
You should see something like:
Configuration file: /octocat/personal-website/_config.yml
Source: /octocat/personal-website
Destination: /octocat/_site
Incremental build: disabled. Enable with --incremental
Generating...
GitHub Metadata: No GitHub API authentication could be found. Some fields may be missing or have incorrect data.
done in 14.729 seconds.
Auto-regeneration: enabled for '/octocat/personal-website'
Server address: http://127.0.0.1:4000
Server running... press ctrl-c to stop.
Don't worry about the "No GitHub API authentication could be found" message. API authentication is only necessary if you intend to display more detailed metadata, like a branch name.
- Now browse to http://localhost:4000
When you host your personal website's code on GitHub, you get the support of free hosting through GitHub Pages.
The fastest approach is to rename your repository username.github.io, where username is your GitHub username (or organization name). Then, the next time you push any changes to your repository's master branch, they'll be accessible on the web at your username.github.io address.
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.
Most customizations can be done in a matter of seconds, by revising your repository's _config.yml file. Just remember to restart your local server each time you save new changes so your Jekyll-powered website rebuilds correctly:
- Shut down your server by entering the keyboard command CTRL+c
- Restart your server:
bundle exec jekyll serve
Your website will display in a two-column layout by default on larger-screen devices, with your photo, name, and basic information displayed in a left-aligned "sidebar." You can quickly switch to a "stacked" single-column layout by changing the line in your _config.yml file that reads layout: sidebar to layout: stacked.
Your website appears with a "light" white and gray background by default, with dark text. You can quickly switch to a "dark" background with white text by changing the line in your _config.yml file that reads style: light to style: dark.