A minimal, lightweight, easy and free Jekyll theme to create a 'website under construction' page.
- 😊 Based on the Unstruction template.
- 👞 Powered by Shoelace, an amazing web components library.
- ⏱️ Displays a countdown timer until the website launch date.
- 🌙 Automatically chooses dark/light mode based on user's system preference.
- ☎️ Option to show the necessary contact info.
There are multiple ways to install and set up Unstruction. Let's explore each of them.
If you need the quickest way to set this up or if you're a complete beginner to Jekyll, using the GitHub template is the easiest option. Setting this up doesn't require any coding skills. You can also fork the repo.
- Visit Unstruction theme repository.
- Click the Use this template button.
- Select Create a new repository.
- Give it a name and click Create repository.
- Edit the
_config.ymlfile for customization. Check the Configuration guide for details. - Go to Settings > Pages. Under Build and deployment, select GitHub Actions as the source.
- If you have a custom domain, you can enter it. Otherwise, you can view the published website at
https://<username>.github.io/unstruction-jekyll-themeonce the building is complete!
Go to your site's _config.yml and replace theme: with remote_theme: digitalmalayalistudio/unstruction-jekyll-theme.
Add this line to your Jekyll site's Gemfile:
gem "unstruction-jekyll-theme"And add this line to your Jekyll site's _config.yml:
theme: unstruction-jekyll-themeAnd then execute:
$ bundle
Or install it yourself as:
$ gem install unstruction-jekyll-theme
Unstruction is super-easy to customize! There is only one layout and that is default.html.
Edit the _config.yml file to add your website's name, favicon, image, color theme, launch date and contact details.
# Jekyll
theme: unstruction-jekyll-theme
# Site Configuration
name: Unstruction # Name of your website
favicon: assets/favicon.svg # SVG favicon of your website
url: https://digitalmalayalistudio.github.io/linkhub-jekyll-theme # URL of your website
image: assets/preview.webp # Also used for SEO (og:image)
color: orange # Preferred theme color based on the Shoelace color tokens. Visit https://shoelace.style/tokens/color#theme-tokens.
date: Jan 1, 3000, 00:00:00 # Set the planned launch date and time in an ISO 8601 format or use the format shown in the example. Time is optional. Remove this variable if you don't need a countdown.
# Contacts
phone: +91123456789 #Remove any that are not needed
mail: mail@example.com
whatsapp: 91123456789
location: https://maps.google.com/location
# Defaults
defaults:
-
scope:
path: ""
values:
layout: "default"
# Exclude
exclude: [README.md, Gemfile.lock, .jekyll-cache/, .github/, CHANGELOG.md, Gemfile, LICENSE.txt, funding.yml, unstruction-jekyll-theme.gemspec]Bug reports and pull requests are welcome. If you like this theme, please give it a star! And if you've used this theme on your website, feel free to add it below.
To set up your environment to develop this theme, run bundle install.
Your theme is set up just like a normal Jekyll site! To test your theme, run bundle exec jekyll serve and open your browser at http://localhost:4000. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
When your theme is released, only the files in _layouts, _includes, _data and assets tracked with Git will be bundled.
To add a custom directory to your theme-gem, please edit the regexp in unstruction-jekyll-theme.gemspec accordingly.
The theme is available as open source under the terms of the MIT License.
