Skip to content

Latest commit

 

History

History
298 lines (227 loc) · 10.9 KB

README.md

File metadata and controls

298 lines (227 loc) · 10.9 KB
Raw

My personal website

The code is managed in a GitHub repository. The repo is mirrored to GitLab, where a GitLab Pages pipeline is ran when commits are received. The website is hosted by GitLab at https://jason-manuel.com.

The website was forked and personalized from github/personal-website.

The site is built with Jekyll. GitHub's API is used to automatically populate the website with content.

Installation

If you want to create your own version of this website, you can fork/clone github/personal-website (probably what you want) or this repo.

Install in your local development environment

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.

Install Jekyll

Jekyll is a Ruby Gem that can be installed on most systems.

  1. Install a full Ruby development environment
  2. Install Jekyll and bundler gems
gem install jekyll bundler
  1. Change into your new directory
cd personal-website
  1. Install missing gems
bundle install
  1. 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.

  1. Now browse to http://localhost:4000

Publish

The site could be hosted with GitHub Pages. However, this website is hosted on a GoDaddy server. The built site is uploaded to the server through FTP in a Buddy pipeline.

Customization

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

Many 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:

  1. Shut down your server by entering the keyboard command CTRL+c
  2. Restart your server: bundle exec jekyll serve

Layout

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.

Style

Your website appears with a "dark" background with white text by default. You can quickly switch to "light" white and gray background with dark text by changing the line in your _config.yml file that reads style: dark to style: light.

Projects

The "My Projects" section of your website is generated by default with your nine most recently "pushed" repositories. It also excludes repositories that you forked, by default. But each of these parameters can be quickly customized in your repository's _config.yml file, under the projects dictionary line.

Parameters include:

  • sort_by: The method by which repositories are sorted. Options include pushed and stars.
  • limit: The maximum number of repositories that will be displayed in the "My Projects" section of your website. Out of the box, this number is set to 9.
  • exclude:
    • forks: When true, repositories you've forked will be excluded from the listing.
    • projects: A list the repository names you want to exclude from the listing.

Topics

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. https://github.com/topics/sass).
  • image_url: The web address of an (ideally square) image that you'd like to appear with your topic.

Social media

Your website supports linking and sharing to social media services you're using, including Behance, Dribbble, Facebook, LinkedIn, Medium, Stack Overflow, Twitter, and YouTube. To identify the services you use:

  1. Edit your repository's _config.yml file.
  2. Edit the social_media dictionary line, and represent the services you like in a simple key: value form:
social_media:
  behance: your_username
  dribbble: your_username  
  facebook: your_username
  hackerrank: your_username
  instagram: your_username
  keybase: your_username
  linkedin: your_username
  medium: your_username
  stackoverflow: your_user_id
  telegram: your_username
  twitter: your_username
  unsplash: your_username
  vk: your_username
  website: http://your_website_url
  youtube: your_username

Links to your profile for each of the services you define will appear in the <header> of your website, appended to your bio. And if those services support sharing, any blog posts that you publish will include links to share that post using each social media service.

Note: This feature is supported by two files in your repository:

  • /_data/social_media.yml: Defines each of the supported services, including variable name, display name, URL path, and SVG icon.
  • /_includes/social_media_share_url.html: Outputs the share URL required for any of the supported social media services that support sharing URLs.

If you're interested in adding a social media service that's not already supported in this repo, you can edit these two files to build that support.

Adding pages

To add a page to your website (e.g. detailed resume):

  1. Create a new .html or .md file at the root of your repository.
  2. Give it a filename that you want to be used in the page's URL (e.g. http://yoursite.dev/filename).
  3. At the start of your file, include the following front matter:
---
layout: default
---

Adding blog posts

To add a blog post to your website:

  1. Create a new .md file in your repository's /_posts/ directory.
  2. Give it a filename using the following format:
YEAR-MONTH-DAY-title.MARKUP
  1. 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 published as false, so that it won't appear on your website.

While you can 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.

Jekyll's conventions for authoring and managing blog posts is very flexible. You can learn more in Jekyll's documentation for "Posts."

Content and templates

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 /_includes/ directory.

There are the usual suspects, like header.html and 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 _config.yml.
  • 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.

Layouts

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 index.html homepage to display listings of your projects, interests, and (optionally) your blog posts.
  • post: Used by default by the posts in your /_posts/ directory.

Jekyll's convention for defining layouts is very flexible. You can learn more about customizing your layouts in the Jekyll "Layouts" docs.

Styles

Your website is pre-configured to use GitHub's very flexible CSS framework called "Primer,". It's currently referenced within your styles.scss file, using the CSS import at-rule:

@import url('https://unpkg.com/primer/build/build.css');

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.

License

The website and the original theme are available as open source under the terms of the MIT License.