|Brandon Rosage 7b775d501c remove specific repository reference in config||5 months ago|
|_includes||5 months ago|
|_layouts||5 months ago|
|_posts||5 months ago|
|_site||5 months ago|
|assets||5 months ago|
|.gitattributes||6 months ago|
|.gitignore||5 months ago|
|.ruby-version||5 months ago|
|Gemfile||5 months ago|
|Gemfile.lock||5 months ago|
|LICENSE.txt||5 months ago|
|README.md||5 months ago|
|_config.yml||5 months ago|
|favicon.ico||5 months ago|
|github-personal-website.gemspec||5 months ago|
|index.html||5 months ago|
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.
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.
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.
gem install jekyll bundler
bundle exec jekyll serve
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 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
If you want to use a custom domain, however, 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 custom 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:
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
_config.yml 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
_config.yml 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
_config.yml 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):
.mdfile at the root of your repository.
--- layout: default ---
To add a blog post to your website:
.mdfile in your repository's
--- 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.
While you can also define a
layout in the front matter, your website is pre-configured to assign the
post layout to all of the posts in your
/_posts/ directory. So you don't have to declare that in your posts, if you don't want to.
Jekyll's conventions for authoring and managing blog posts is very flexible. You can learn more in Jekyll's documentation for "Posts."
To give you a sound foundation to start your personal website, your repository includes a handful of "includes" -- dynamic
.html files that are re-used throughout your website. They're all stored in the
There are the usual suspects, like
footer.html. But there are few more worth pointing out:
interests.html: A heading and dynamic list of "My Interests," which is populated with the topics you list in your
masthead.html: 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.
post-card.html: A compact, summarized presentation of a blog post, re-used to display a listing of your latest blog posts.
projects.html: A heading and dynamic list of "My Projects," which is populated with a listing of your newest GitHub repositories.
repo-card.html: A compact, summarized presentation of a repository, re-used to display a listing of your GitHub repositories.
thoughts.html: A heading and dynamic list of "My Thoughts," which is populated with a listing of your latest blog posts.
topic-card.html: A compact, summarized presentation of a topic (defined in your
_config.yml), re-used to display a listing of your interests.
Your repository comes with three layouts:
index.htmlhomepage to display listings of your projects, interests, and (optionally) your blog posts.
Jekyll's convention for defining layouts is very flexible. You can learn more about customizing your layouts in the Jekyll "Layouts" docs.
Your website is pre-configured to use a very flexible CSS framework called "Primer," alongside any custom styles you write in your
/assets/styles.scss Sass stylesheet. It's currently referenced within your
styles.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.
The theme is available as open source under the terms of the MIT License.