Creating your own static professional website
One of the rising trends for professionals is to set up a professional website that smoothly and aesthetically displays who you are and what you’ve accomplished. In lieu (or in addition) to the traditional resume or CV, a professional website can help display the personality behind your projects, and include helpful links to the webpages for a grant funder, previous employer, or program you’ve completed can provide additional on-demand context for your work, research, or life experience.
While website-building and hosting software like Wix and Squarespace can be easy to work with, it’s important to be aware of how companies and corporations take and use your data for their own purposes. Services like Wix and Squarespace also restrict certain features behind paywalls, as well as restrict your control over what you can edit and how you can edit it to a small suite of blocks, themes, and plugins.
Wait, what does hosting mean?
Let’s start from the beginning. Access to the Internet is provided through a mixture of hardware and software (called network nodes) that communicate information through various physical and digital communication channels. Computer networks are a group of computers communicating through these channels. The Internet is a giant interconnected network made up of those computer networks, which is accessed through things like WiFi, mobile data, or Ethernet ports. These access points are connected to those communication channels through hardware, like modems and routers, and software.
Computers communicate with each other over the Internet using a set of rules called Hypertext Transfer Protocol (HTTP) which ensures that they can understand one another. You can see how this works if you click on the URL in your search bar: the URL starts with “http” or “https”. A web server is a computer that holds web files, written in Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS), located at specific URLs. Web browsers are applications that send requests to the web server for files located at the URL, which the web server sends back for the web browser to display. This is where web hosting comes in. Typically, you have to pay a company to hold your webpage files on its web servers or computers. Since hosting web files to be displayed on-demand by users who visit your site takes up a lot of space, memory, and bandwidth, the average laptop or home computer isn’t capable of doing this. Hosting companies have dedicated computers with the appropriate hardware and software to handle web hosting.
What’s a static site?
There are two basic types of websites: static and dynamic. Static websites have content that is written largely in HTML and CSS with some Javascript, and the content written in the web files is fixed. This means that no matter who accesses the site, the content that will be delivered from the server will be the same each time.
Dynamic sites change the content of the site depending on user engagement and other input factors, like the user’s location, pinned topics, etc. Think of the Instagram “For You” page: new content is displayed every time you access the page depending on what you’ve liked, searched for, clicked on, and hovered over.
For professional websites which have content that is meant to display general information about you, your projects, and your achievements, you probably won’t need the content to be tailored towards the user. Fortunately, static sites are really easy to build and host, and many platforms offer free hosting depending on how you build your site.
Building your site
This guide will walk you through how to build a static professional website from scratch, with different options depending on your technical comfort level. All of these options are free to use at the basic level, but may have paywalls for some advanced features. If you have any questions, feel free to contact the Collections as Data Librarian, Kiran Mohammadi-Williams, at kam535@cornell.edu.
Getting started
The first thing to consider when you’re starting to build your site is which tool you’d like to use. There are many static site builders out there. Some static site builders are Content Management Systems (CMS), which means you can organise and edit your content with a dedicated user interface instead of having to code. Some good static site generators that are also CMSs are: WordPress.org, Publii, Mobirise, Primo, and Lektor.
Some great static site generators that are not CMSs, meaning you’ll need to learn some basic code to use them and build the site in a secondary application, are: Jekyll, Octopress, HydePHP, gitfolio, and Haykyll.
In this guide, I’ll walk you through how to create a site using Publii and how to create a site using Jekyll and GitHub. Both are free to create, and GitHub has free hosting as well.
Using a CMS vs. Jekyll: pros and cons
The difference between content management systems (CMS) and a static site generator like Jekyll is that a CMS will manage a set collection of uploaded and inputted content and allow you to display it how you want. Most CMSs are block-based, meaning that your content is filled into pre-coded and pre-styled types of blocks (like image galleries, quotes blocks, etc.).
Jekyll-based static sites require you to add all of the content, or link out to it, yourself and decide where you want it to go and how you want it to display, using CSS and HTML. Here are some pros and cons to weigh before deciding which option you’d like to go with:
Jekyll, Hakyll, gitfolio, etc.
- Near complete control over all of your data and content
- Free (no paid subscriptions)
- Open-source (code is shareable with others, can be troubleshooted by others)
- Advanced (near infinite) customisation options
- Opportunity to learn new skills, stretch your technical skills
- Can be free to deploy and host depending on the platform, like GitHub Pages
- Active and robust communities to get personal support for other users
- Must know, or be willing to learn, some HTML and CSS
- Higher learning curve
- No GUI (Graphical User Interface); you’ll be editing code directly
- Can be too many options for customisation, hard to decide what you want your site to look like and do
- Time-consuming content management (must manage and categorise all content manually)
- No corporation-level support
CMS (Publii, Mobirise, Primo, etc.)
- Easy to use with no technical know-how
- Has a GUI (Graphical User Interface) where you edit all content, usually in block
- Manages, arranges, and categorizes all of your content into pages, posts, etc. for you
- Makes adding media, videos, and links super quick and easy
- Dedicated corporate support teams when you run into issues
- Can have paywalls for advanced features and themes
- Limited customisation options, based on what preset themes and blocks the tool offers
- Not open-source; code cannot be shared for troubleshooting with others
- May require an external paid host; some can be free to host, but more complicated migration to GitHub pages
- Probably won’t sell your content and data, but no guarantees
Creating a site with Publii
Publii is just one of many CMSs for static sites. For more content management systems, see the Platforms & Tools page of the CoLab’s Guides site. While the instructions in this guide will be particular to Publii, they should be generally transferable with some tweaks to most major content management systems. It’s best to read the documentation for your particular management system to understand how to use it.
The benefit of Publii is that it’s got a great, easy-to-use interface, doesn’t require an account to use (because it’s a downloadable software instead), and is completely free. You can download Publii off of their website.
CMS language: what’s a page, what’s a post?
Lots of CMSs, like WordPress, use the same language to describe different elements that will make up your site. Publii uses this common vocabulary, and has two main types of publishable content: pages and posts. Pages are typically the larger, fixed categories of content in your site, such as an About section, a list of posts, a home page, etc. Posts are pieces of specific content, like a short story, a photo essay, or a blog entry, that don’t need to follow a specific format or include specific types of content. Posts can be, and are usually, organized on different pages.
Navigating the editors
Publii has three different editors you can use to create pages and posts: WYSIWYG (what you see if what you get), Block, and Markdown.
- The WYSIWYG editor lets you create and edit content the way you would create a document in Words, Google Docs, or another word processor. Content in the WYSIWYG editor appears as it will appear on your final site.
- The Block editor allows you to add content in pre-formatted arrangement, such as a gallery of images, a table of contents, or a list. Content is contained in these boxes which can be moved, rearranged into rows and columns, or grouped together to organize how they appear.
- The Markdown editor allows you to write content using the markup language Markdown.
For those with very little experience web-building, the Block editor is probably the easiest to work with, since all elements are preformatted.
Themes & plugins
Publii relies on themes to edit, organize, and display content and on plugins to add additional features. What aspects of the site you can edit depend on what theme you use. You can find themes and plugins by opening Publii and clicking the three vertical dots in the top right of the Publii interface and clicking either “Themes” or “Plugins”. Once you’ve downloaded the theme or plugin, you can click on the blue Install plugin or Install theme buttons to add them to Publii.
Creating and editing content
Using Publii’s graphical user interface, you can create posts, add pages, add tags, create navigation menus, and edit your post layouts and homepage in the Theme section. This guide won’t take you step-by-step through creating every piece of content, since this is up to you and what you want to put on your site. You can learn more about adding specific types of content through the Publii Documentation. Note that you can preview your site using the Preview your changes button on Publii.
Publishing your site to the web
Publii allows you to serve your site to the web from the Server section of the application. If you’re hosting your site using an external hosting service, follow their instructions to make sure your connection works and your site is served properly. You can also serve your site using GitHub Pages for free in the Server section. You can continue to edit your site in the Publii application after that.
What if I don’t like Publii?
No worries! As mentioned at the beginning of this section, there are plenty of CMSs out there. The key is to find one whose values align with your own. Here are some options:
Creating a site with GitHub and Jekyll
The process of creating a site with GitHub and Jekyll requires some knowledge of Markdown, HTML, and CSS because you’ll have to manage and code the back-end of your site yourself. Luckily, there are plenty of beautiful pre-made Jekyll template available publicly on GitHub to get you started, so the process is much easier even if your coding skills are limited.
Hosting
The first thing to consider before you start creating a website with Jekyll and Git is, strangely enough, the end product: a hosted website. In order to get your website onto the World Wide Web, you will need to decide whether you’d like to pay for an external hosting service, like Reclaim Hosting, or host your site on GitHub using GitHub Pages. The benefit of hosting on an external service is that you have control over all of the hosting settings for your site (including how it’s served to the Web). The benefit of hosting through GitHub Pages is that it is free.
Hosting services also make it easier to seamlessly incorporate and manage a domain alongside your hosting. If you’d like a custom domain, which is a custom URL for your site (e.g. “kiranisawesome.com”), you can still host your site on GitHub Pages, but you’ll have to manage your hosting and domain separately. The default domain for a GitHub Pages site is: USERNAME.github.io/REPOSITORY-NAME. If you’re new to hosting and domains and do not have the time to learn more about best practices for managing these aspects of your site, we recommend using a hosting service.
Why does this matter? If you plan to host your site through GitHub Pages, then you can build your site using GitHub.com and will need a GitHub account. If you’re planning to host your site using an external hosting company, you can build your site entirely using Git and your computer’s command line and will not need a GitHub account. You can always change your mind later. If you started creating your site in GitHub.com, you can always download the files to your computer. If you started creating your site using Git, you can always upload them to a GitHub account later.
Setting up your dependencies
In the web-building world, dependencies are pieces of software and hardware that you need to run a specific program. You’ll need to install these on your computer if you’d like to create a site using Jekyll and Git. This guide will not walk you through how to download these dependencies, but you can find the link to download them and documentation below:
For all of the dependencies after Git, you can follow Jekyll’s great installation guide depending on your operating system.
Choosing a Jekyll template
One of the benefits of using GitHub is that there are tons of free, publicly available templates for Jekyll sites published by amazingly creative people. While you don’t have to use a template to create your site, this is much easier and requires less knowledge of CSS and HTML that creating a site from scratch.
You can find lots of templates on the jekyll-theme GitHub Topics page. There are many templates that are labelled “resume”, “CV”, or “portfolio” that are great for showing off your projects, academic achievements, and work experiences. You will need to create a GitHub account to search for template.
Using a Jekyll template
Once you’ve picked a template, open the template repository on GitHub. Scroll down until you find the README and follow the instructions for downloading or using the template. If the template does not have a README, you can still use the template using one of the following methods:
- Method 1: Download the code directly
- At the top of the template repository, click the green Code button.
- Click Download Zip.
- Rename the zip folder to whatever you’d like.
- Method 2: Clone the template directory
- At the top of the template repository, click the green Code button.
- Copy the HTTPs web URL.
- In the command line on your local computer, run the command: git clone repository-web-url.
- Rename the new repository folder whatever you’d like.
- Method 3: Fork a copy in GitHub.com
- At the top of the template repository, click the Fork button.
- Make sure Copy the main branch only is checked.
- Fill in the settings, name, etc. for your new repository.
- Click the green Create fork button.
Note that if you are comfortable with CSS, HTML, Markdown, and Javascript and would like to experiment with creating your portfolio site from scratch, you can follow Amanda Visconti’s guide for Programming Historian on setting up the hosting portion of the website.
Editing your site
Since each template is different, you’ll need to play around and find out how to edit your site according to the template’s individual setup and sections. However, the basic structure of all Jekyll sites are the same: they are made up of groups of text and image files located in a specific repository.
You can either create a GitHub account and edit your template within GitHub.com or edit your site from your local device. The repository for your site will be either the GitHub.com repository or the folder that all of your template files are in on your computer. You will edit specific aspects of your site by editing the files that are in this repository.
Some common files amongst template are:
_config.yml: The_config.ymlfile controls the configuration and settings for various elements on the site, including navigation/menu, the title and description, URL and base URL, copyright information, site logo, the default thumbnail image for items in a gallery, the organization of collections and exhibits, build settings, search settings, and footer links and logos._includes: This folder contains all of the includes for the site. An include is a file that can have its contents pulled using a specific line of code (an include statement) into another file. Include files typically contain the code for an element, tool, or feature of a site, like a gallery, a word cloud, or a timeline. To call an include, you’ll add the an include tag to the code of your page. For more on includes, see the Includes section of the Jekyll documentation._sass: The _sass folder contains the stylesheets (Syntactically Awesome Style Sheets and Cascading Style Sheets) that determine all of the stylistic/aesthetic elements of the site. I highly suggest not messing with these folders until you become more familiar with Wax, Jekyll, web-building, and JS, HTML, and CSS._layouts: This folder contains preset layouts for the content on different pages. You can include a layout in the front matter of a page and any content on that page will be displayed according to the layout.pages: This folder typically contains the files for your website’s pages, written in Markdown. Pages usually require YAML front matter to be formatted correctly.
The best guide for learning how to edit the aesthetics and content of your site is to learn more about how Jekyll works. You can learn more about Jekyll by reading the Jekyll documentation.
Publishing your site using GitHub Pages
If you’d like to host your site for free using GitHub Pages, you can do so even if you’ve been editing your site on your local computer. If you’ve been editing your site using GitHub.com, you can skip steps – below:
- Create a GitHub account. Create a new repository in your GitHub account.
- Under Quick setup — if you’ve done this kind of thing before, click uploading an existing file.
- Open your repository on your local computer so that you can see all of the files inside of it. Drag all of the files inside of your repository into the upload section on GitHub.com. You may have to do this in batches.
- Note that there are other ways to do this that require a fine-grained access token. See the GitHub documentation for details.
- Click the green Commit changes button.
- Go to Settings > Pages.
- Click Deploy from a branch. Under branch, select main. Click the Save button.
- In the top menu of your repository, click <> Code.
- On the right side of the screen, click the gear icon next to “About”.
- Under website, check the box that says “Use your GitHub Pages website”. Click the green Save changes button.
- The URL that now appears in the “About” section is your new website URL.
If you’re publishing your site using a hosting service, follow the hosting services’ instructions. If you want to set up a custom domain for your GitHub Pages website, you can follow the GitHub documentation’s instructions for configuring a custom domain.
Wrap-up
This guide only explores some of the possible ways to use a couple of different tools to build a static portfolio or academic website. There are so many more options out there to explore for different technical skill levels, needs, and styles. We recommend taking a look at the options available in the web, doing your research on the tools you’re using, and finding out what works best for you.
Have suggestions for this guide? Email Kiran at kam535@cornell.edu.