How to: Portfolio sites for journalists, GitHub makes them cheap and (kinda) easy

Time and time again, new journalists are told to market themselves and make a brand for themselves. The new media heroes of the day have all done it — Nate Silver and fivethirtyeight, Andrew Sullivan and The Daily Dish, Brian Stelter and TVNewserMatt ThompsonKat ChowTouréDanyel Smith — the list goes on.

Sometimes, though, all you need is a static site to tell people who you are and what you do — a personal, or portfolio site with contact info and links to your work.

The only problem is that hosting a website is hard work. Just registering a domain name requires navigating a labyrinth of menus and navigation bars designed in the early 2000s that do more to confuse than inform. And for those looking to host full blogs on WordPress or other platforms, it requires syncing a web host to a domain registrar, which can get even more confusing.

At Medill School, students are instructed early to buy their own domain name and install a WordPress blog on it. While Medill has a special promotion with Dreamhost to lower the cost of entry for hosting for the first few months, many students drop their hosting plan when the cost becomes too expensive. Yet when internship and job application season comes around, they want a portfolio site to show off their work.

Many turn back to WordPress and Dreamhost hosting, paying upwards of $10 per month to host what is essentially a static page on slow servers running WordPress. If the site does work, it is way too heavy for serving the purpose of linking readers to all of that student's work elsewhere on the web. Most times, a simple, static site will serve that purpose just fine. In fact, my own website is static.

What if I told you that, if you code your own website, you could host it for free on a much faster, more reliable platform than Dreamhost? Hosting your website on GitHub, the collaborative coding platform, not only provides free static hosting through GitHub Pages, but also encourages you to learn how to code properly using version control.

Wait, what?

Okay, let's get a few terms out of the way.

Static website: A static website is simply a website that has no backend. It doesn't use WordPress, Drupal or any other form of blogging engine that requires a server. So if you build your website in pure HTML, CSS, and JavaScript, you are making a static website!

If you want to experiment with blogging through static websites, check out Jekyll. Note that static site generators like Jekyll require knowledge of the command line and a Ruby installation. You should also know Markdown, which is a lightweight markup language that makes writing on the web easier. I wrote a primer on Markdown a few months ago.

Version control: Think of version control like track changes in Microsoft Word, but a million times more powerful. GitHub uses a version control system called "git", hence its name. GitHub allows you to store a repository of code on its servers. By pushing commits of changes to your repository to GitHub, git is able to keep track of every individual change you make to your code. That means you have a complete history of everything you have done, and you can easily revert back to any previous state of your document easily.

GitHub: GitHub stores git repositories on the Internet. While git is incredibly powerful as a personal tool, it is even more powerful for working with other progammers. Any public repository on GitHub is available for anyone else to see, meaning that people can look at other people's code and learn from it. This is called open-source. GitHub also makes copying code easy with processes called cloning and forking. For our purposes, GitHub is also smart enough to automatically recognize a static website and host it for its users.

For more about GitHub and version control, read the Lab's own Emily Ferber's excellent writeup.

Is a static website right for me?

A static website is definitely not for everyone. Here is a list of reasons why you should not use a static website:

  • I do not want to code my own website.
  • My website will be a regular source of original content, and I need a blogging engine to handle that.
  • I really enjoy using WordPress, Drupal, or another blogging service, and I do not want to try something different.
  • I do not mind paying a monthly fee to host on a server in addition to my yearly domain fee.

Still here? Let's learn how to get your static website on GitHub. For free.

Hosting a website on GitHub

These steps assume that you have already completed the coding on your website. However, putting your code on GitHub does not mean it is final. Quite the contrary — using GitHub early in your development process will make your changes much easier to navigate.

Additionally, the following screenshots use GitHub for Mac, but GitHub for Windows uses a very similar workflow.

Pushing to GitHub

  1. Create a GitHub account on
  2. Download either GitHub for Mac or GitHub for Windows, depending on your operating system. Open the app and log in using the account you just created.
  3. (On Mac): After you login, click advanced and make sure that your name and email are correct. Then, click "Install Command Line Tools", just in case you want to start using the command line later in life. Git is actually a command line tool, but GitHub's applications take its functionality and present it in an attractive interface.install command line tools
  4. Create a new repository in your GitHub application. Name it The name is very important, as GitHub will only recognize your site if the repository is named this way. Note the folder that GitHub is saving the repository to. Make sure the "Push to GitHub?" box is checked. create a repo
  5. Move your website's files into the folder that GitHub just created when you made the repository. Important: Your homepage HTML file must be called "index.html", and it must exist in the top-level directory.
  6. Back in the GitHub application, you should see your files in the left column. Make sure they are all checked. If so, enter a message in the text box called "commit summary", something like "initial commit." Then, click the commit button.
    commit your files
  7. Click the "Publish repo" button in the top right corner.
  8. Give it about 10 minutes, then check Your website should be there!

Using a custom domain name

You can just leave your website at that address (it'll give you some serious street cred in the developer world), but if you have a custom domain you would like to use, it is very simple to make GitHub redirect your page.

  1. Log in to your domain registrar and find where to change your host records. If you don't know, you can usually Google "(domain registrar) change host records", and your registrar will have an explainer telling you how to do it.
  2. Change your domain's A Record to This is GitHub's IP address, which allows GitHub to resolve your URL and serve the correct files. Make sure that you do not have any other A Records associated with your domain.
  3. In your website's directory folder on your computer, create a file called "CNAME". On the first line, type your domain name. Save the file. Your CNAME file should not have a file extension. It is not a .txt file. If you create and save the file in a text editor like Sublime Text, you can create the file without an extension.
  4. In your GitHub application, you should see the new CNAME file in the left column. Make sure it is checked and enter your commit message. Have it say something like "Adding CNAME file."
  5. Click "Sync branches."

It can take as long as 48 hours for your domain to resolve to your GitHub page. However, it is usually pretty quick, so check back in an hour or so.

Now What?

Keep making your website better! If you have changes to make, make them in the repository on your computer. Then, commit them to your repository just like when we added the CNAME file. Every change you make can easily be committed and uploaded to GitHub. The changes you make should appear on your website nearly instantaneously!

What just happened?

If you completed this tutorial, you should feel pretty cool. You just programmed your own website and put it on the Internet for all to see. Let's talk about how this happened.

You programmed your website using HTML, CSS, and JavaScript. You tested and played around by opening the file locally and seeing it in your browser. Your code probably broke sometimes, and maybe you felt like giving up and just using a default Tumblr instead. But you didn't. You kept going and you created a real, working website.

By creating a git repository for your code, you have created a living history of everything you do to that website from this point on. By putting it on GitHub, that history exists on the Internet, and the world can see its realized, current state through GitHub Pages. All of its internal organs, all of the code, are publicly available. Perhaps that is scary to some, but it is actually awesome. If you are having issues with your code, point someone who can help to your repository. They can clone your code, play around, and help you make it work. Collaboration happens easier and more often because of GitHub.

More importantly, if this is your first experience coding, you are proof that it is possible. Everyone can see your work and have a better place to start from. You are pushing the world to become better users of the Internet, one little static website at a time.

About the author

Tyler Fisher

Undergraduate Fellow

Latest Posts

  • Building a Community for VR and AR Storytelling

    In 2016 we founded the Device Lab to provide a hub for the exploration of AR/VR storytelling on campus. In addition to providing access to these technologies for Medill and the wider Northwestern community, we’ve also pursued a wide variety of research and experimental content development projects. We’ve built WebVR timelines of feminist history and looked into the inner workings of ambisonic audio. We’ve built virtual coral reefs and prototyped an AR experience setting interviews...

    Continue Reading

  • A Brief Introduction to NewsgamesCan video games be used to tell the news?

    When the Financial Times released The Uber Game in 2017, the game immediately gained widespread popularity with more than 360,000 visits, rising up the ranks as the paper’s most popular interactive piece of the year. David Blood, the game’s lead developer, said that the average time spent on the page was about 20 minutes, which was substantially longer than what most Financial Times interactives tend to receive, according to Blood. The Uber Game was so successful that the Financial...

    Continue Reading

  • With the 25th CAR Conference upon us, let’s recall the first oneWhen the Web was young, data journalism pioneers gathered in Raleigh

    For a few days in October 1993, if you were interested in journalism and technology, Raleigh, North Carolina was the place you had to be. The first Computer-Assisted Reporting Conference offered by Investigative Reporters & Editors brought more than 400 journalists to Raleigh for 3½ days of panels, demos and hands-on lessons in how to use computers to find stories in data. That seminal event will be commemorated this week at the 25th CAR Conference, which...

    Continue Reading

  • Prototyping Augmented Reality

    Something that really frustrates me is that, while I’m excited about the potential AR has for storytelling, I don’t feel like I have really great AR experiences that I can point people to. We know that AR is great for taking a selfie with a Pikachu and it’s pretty good at measuring spaces (as long as your room is really well lit and your phone is fully charged) but beyond that, we’re really still figuring...

    Continue Reading

  • Capturing the Soundfield: Recording Ambisonics for VR

    When building experiences in virtual reality we’re confronted with the challenge of mimicking how sounds hit us in the real world from all directions. One useful tool for us to attempt this mimicry is called a soundfield microphone. We tested one of these microphones to explore how audio plays into building immersive experiences for virtual reality. Approaching ambisonics with the soundfield microphone has become popular in development for VR particularly for 360 videos. With it,...

    Continue Reading

  • Audience Engagement and Onboarding with Hearken Auditing the News Resurrecting History for VR Civic Engagement with City Bureau Automated Fact Checking Conversational Interface for News Creative Co-Author Crowdsourcing for Journalism Environmental Reporting with Sensors Augmented Reality Visualizations Exploring Data Visualization in VR Fact Flow Storytelling with GIFs Historical Census Data Information Spaces in AR/VR Contrasting Forms Of Interactive 3D Storytelling Interactive Audio Juxtapose Legislator Tracker Storytelling with Augmented Reality Music Magazine Navigating Virtual Reality Open Data Reporter Oscillations Personalize My Story Photo Bingo Photojournalism in 3D for VR and Beyond Podcast Discoverability Privacy Mirror Projection Mapping ProPublica Illinois Rethinking Election Coverage SensorGrid API and Dashboard Sidebar Smarter News Exploring Software Defined Radio Story for You Storyline: Charts that tell stories. Storytelling Layers on 360 Video Talking to Data Visual Recipes Watch Me Work Writing and Designing for Chatbots
  • Prototyping Spatial Audio for Movement Art

    One of Oscillations’ technical goals for this quarter’s Knight Lab Studio class was an exploration of spatial audio. Spatial audio is sound that exists in three dimensions. It is a perfect complement to 360 video, because sound sources can be localized to certain parts of the video. Oscillations is especially interested in using spatial audio to enhance the neuroscientific principles of audiovisual synchrony that they aim to emphasize in their productions. Existing work in spatial......

    Continue Reading

Storytelling Tools

We build easy-to-use tools that can help you tell better stories.

View More