Personal websites are a fun way to express yourself on the Internet. Plus, they're great for learning web development.
In this tutorial, you will make a GitHub Page, but this advice is applicable to static sites hosted anywhere.
Make a repository and git init it.
mkdir jplace.github.io
cd jplace.github.io
git initCreate a file called index.html. Put some HTML scaffolding in it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title goes here</title>
<style>
/* css goes here */
</style>
</head>
<body>
<!-- HTML goes here -->
<div>Hello, world!</div>
</body>
</html>Serve the HTML using Python's SimpleHTTPServer. This Python module accepts HTTP requests and responds with file contents matching the requested path.
# python 3
python -m http.server 7999
# python 2
python -m SimpleHTTPServer 7999View your site in a browser at http://localhost:7999/. Reload the site to see new edits to your HTML.
You will need to create a new repository named username.github.io, where username is your GitHub username. If the first part of the repository doesn’t exactly match your username, it won’t work, so make sure to get it right.
Create a new repository here.
Commit. Then, follow the instructions to push an existing repository from the command line.
git add --all
git commit -m "First commit"
git remote add origin https://github.com/jplace/jplace.github.io.git
git push -u origin masterGitHub will automatically update your hosted site everytime you push to origin/master.
Decide what your site should look like. This is the fun part, but it's also the hardest part.
New web developers often try to design and code at the same time. Don't do this! Coding is hard enough. Draw out your design first (on paper or in your mind).
Google "personal website design ideas". There's no shortage of examples out there. Find one or two simple ones you like. It's very easy to change color schemes, pick new fonts, or tweak layout.
If you are new to web development, ship something simple first. Put your name, a link to your resume, and a link to any social media. It'll be hard enough to make this look good. If you enjoy working on it, redesign with more content in the future!
If you have previous experience, consider something more ambitious. Include a blurb about yourself, a picture, and links to work you've done. Any work is worth linking to! Written pieces, GitHub projects, music productions, etc.
If you don't want to design your own site, I recommend copying mine: https://jplace.github.io/. View the source of the page or see my repository.
In HTML, each element has a display value. Make sure you understand the difference between block and inline before starting to code. Your layout will be almost entirely block elements. You will use inline elements to style text or horizantally-align links.
Each element also has a box-sizing algorithm. I recommend using border-box box-sizing for everything. It's much more intuitive than content-box box-sizing (which is the default). To apply border-box to all elements, include this CSS anywhere in your styles.
*,
*::before,
*::after {
box-sizing: border-box;
}When laying out elements, reach for modern CSS features: flexbox and grid. Beware that reading about these features can be tedious and confusing. I recommend Flexbox Froggy and Grid Garden to quickly learn these features.
Intelligent use of color is important to a site. I use Colormind to generate color schemes. I like that it explains how to use the colors effectively!
I also love color.lol!
I recommend picking just a single font for your site. You can pick two fonts if you want one for headers (like your name) and one for all other text on the page.
Web safe fonts outlines the normal fonts used in websites. These are a very safe bet.
If you're feeling adventurous, Google fonts has tons of more unusual ones to chose from. To use these, include a link to your chosen font in the <head> of your page.
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet"
/>
</head>I love iconmonstr for free icons. I get my social media badges and little pieces of flair here.
When you can, I recommend using SVGs that are Base64-encode.
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjQgNC41NTdjLS44ODMuMzkyLTEuODMyLjY1Ni0yLjgyOC43NzUgMS4wMTctLjYwOSAxLjc5OC0xLjU3NCAyLjE2NS0yLjcyNC0uOTUxLjU2NC0yLjAwNS45NzQtMy4xMjcgMS4xOTUtLjg5Ny0uOTU3LTIuMTc4LTEuNTU1LTMuNTk0LTEuNTU1LTMuMTc5IDAtNS41MTUgMi45NjYtNC43OTcgNi4wNDUtNC4wOTEtLjIwNS03LjcxOS0yLjE2NS0xMC4xNDgtNS4xNDQtMS4yOSAyLjIxMy0uNjY5IDUuMTA4IDEuNTIzIDYuNTc0LS44MDYtLjAyNi0xLjU2Ni0uMjQ3LTIuMjI5LS42MTYtLjA1NCAyLjI4MSAxLjU4MSA0LjQxNSAzLjk0OSA0Ljg5LS42OTMuMTg4LTEuNDUyLjIzMi0yLjIyNC4wODQuNjI2IDEuOTU2IDIuNDQ0IDMuMzc5IDQuNiAzLjQxOS0yLjA3IDEuNjIzLTQuNjc4IDIuMzQ4LTcuMjkgMi4wNCAyLjE3OSAxLjM5NyA0Ljc2OCAyLjIxMiA3LjU0OCAyLjIxMiA5LjE0MiAwIDE0LjMwNy03LjcyMSAxMy45OTUtMTQuNjQ2Ljk2Mi0uNjk1IDEuNzk3LTEuNTYyIDIuNDU3LTIuNTQ5eiIvPjwvc3ZnPg=="
/>There's many details that make a site look professional.
Box shadows add texture to your flat site. I recommend applying them to images.
box-shadow: 2px 2px 5px black;The CSS line-height property dictates the spaces between lines of text. Increase the line height for subtext that's part of a header.
<h1>Jordan Place</h1>
<p style="line-height: 1.5;">
At work, I think a lot about how to write code that isn't scary to change
often. At home, I think a lot about pop music.
</p>CSS gradients add texture to your site. I suggest cssgradient.io for designing them.
If your site's CSS supports small screen sizes, add this <meta> tag to <head>. If it doesn't, omit this tag: mobile devices will try their best to size the webpage so that it looks good.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>When you're website is looking good, add these finish touches!
A favicon is 32px-by-32px image that shows up in a browser tab next to your site title. I recommend using the favicon.io emoji generator for painless favicons.
<head>
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon.png" />
</head>OpenGraph tells clients like Twitter or iMessage how to preview your website when it is linked to. You can include a title, description and image for them to show.
<head>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Jordan Place" />
<meta property="og:site_name" content="Jordan Place" />
<meta property="og:url" content="https://jplace.github.io/" />
<meta
property="og:image"
content="https://jplace.github.io/images/jplace.jpg"
/>
<meta
property="og:image:secure_url"
content="https://jplace.github.io/images/jplace.jpg"
/>
<meta property="og:image:width" content="100" />
<meta property="og:image:height" content="150" />
<meta property="og:description" content="Jordan Place's personal website" />
</head>Some developers prefer not to write raw CSS. Instead, they adopt CSS frameworks, static site generators with themese, or website builders.
In my opinion, these are quite hard to use if you don't already know CSS. But, try them out and see if you can make them useful!
Light-weight frameworks provide helpers for "common" things in CSS. They lead you to good, responsive designs without dictating how your site should look.
Heavy-weight frameworks provide components you'll need to make a site. These include cards, buttons, nav, etc. They very much dictate how your site will look.
A "static site generator" is a piece of software that injects custom content into an HTML template. It outputs HTML files to be served from your github.io site.
Static site generators are most commonly used for blogs. They generate a page for each blog post without the developer having to maintain HTML on each page individually. They are generally useful for sites with lots of content.
If your personal website will have lots on content, try out Jekyll with GitHub Pages. You can adopt a pre-made themes for Jekyll to avoid having to write HTML or CSS at all.
You can also google "free website builders" to find drag-n-drop tools for building sites. I have no prior experience with these, so I cannot recommend any.