{"id":1550,"date":"2023-05-03T16:41:07","date_gmt":"2023-05-03T16:41:07","guid":{"rendered":"https:\/\/digitalscholarship.library.cornell.edu\/?p=1550"},"modified":"2026-02-17T18:27:28","modified_gmt":"2026-02-17T18:27:28","slug":"static-site-guide","status":"publish","type":"post","link":"https:\/\/digitalscholarship.library.cornell.edu\/?p=1550","title":{"rendered":"Static site guide"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Creating your own static professional website<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

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\u2019ve 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\u2019ve completed can provide additional on-demand context for your work, research, or life experience.<\/span><\/p>\n

While website-building and hosting software like Wix and Squarespace can be easy to work with, it\u2019s important to be aware of how <\/span>companies and corporations take and use your data for their own purposes<\/span><\/a>. 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.<\/span><\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Wait, what does hosting mean?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"How\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Let\u2019s 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.<\/span><\/p>

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 \u201chttp\u201d or \u201chttps\u201d. 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\u2019t capable of doing this. Hosting companies have dedicated computers with the appropriate hardware and software to handle web hosting.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

What\u2019s a static site?\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

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.<\/span><\/p>\n

Dynamic sites change the content of the site depending on user engagement and other input factors, like the user\u2019s location, pinned topics, etc. Think of the Instagram \u201cFor You\u201d page: new content is displayed every time you access the page depending on what you\u2019ve liked, searched for, clicked on, and hovered over.<\/span><\/p>\n

For professional websites which have content that is meant to display general information about you, your projects, and your achievements, you probably won\u2019t 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.<\/span>

<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Building your site<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

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 <\/span>kam535@cornell.edu<\/span><\/a>.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Getting started<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The first thing to consider when you\u2019re starting to build your site is which tool you\u2019d like to use. There are many static site builders out there. Some static site builders are Content Management Systems (CMS)<\/strong>, 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, <\/span>Primo<\/span><\/a>, and <\/span>Lektor<\/span><\/a>. <\/span><\/p>

Some great static site generators that are not CMSs<\/strong>, meaning you\u2019ll need to learn some basic code to use them and build the site in a secondary application, are: Jekyll, Octopress, <\/span>HydePHP<\/span><\/a>, gitfolio, and Haykyll.\u00a0<\/span><\/p>

In this guide, I\u2019ll 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.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Using a CMS vs. Jekyll: pros and cons<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

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.).\u00a0<\/span><\/p>

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:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Jekyll, Hakyll, gitfolio, etc.<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t