This Jekyll theme was originally crafted by John Otander as Pixyll, then modified by Sai Kiran Sripada, and then the NHS theme added by Craig Robert Shenton. It's free, and open source (MIT).
Note: No NHS data, public or private are shared in this repository.
| Name | Link | Description |
|---|---|---|
| _includes | [Link] | Element templates |
| _layouts | [Link] | Page templates |
| _posts | [Link] | Blog post markdown files |
| _sass | [Link] | basscess files |
| assets | [Link] | Image assets |
| css | [Link] | css style files |
- Hit the green 'Use this template' button at the top of this repository page.
- A new site will open asking you to create a new repository from
nhsuk-static-jekyll. - Give your repository a name.
- This is form part of the new website's URL:
https://{github username}.github.io/{repository name}/. - Set the visability to
Publici.e., Anyone on the internet can see this repository. - Hit the green 'Create repository from template' button.
- GitHub will then clone all the code used to build the website to your new repository.
- Go to the _config.yml in your new repository.
- Edit the site settings shown below:
# ---------------------------------------------------------------------------------------------------------
title: nhsuk-static-jekyll Add a title to your website
email: [email protected] Add your email to the contacts page
author: Craig Robert Shenton Add your name as the defult author for blog posts
description: "My first website" Add sub-text to the 'hero' card on the home page
url: "https://craig-shenton.github.io/" Set to "https://{github_username}.github.io"
baseurl: "nhsuk-static-jekyll/" Set this as the same name as your repository
github_username: craig-shenton For adding links to your GitHub page
linkedin_username: craigrshenton For adding links to your LinkedIn page
date_format: "%b %-d, %Y" Sets the date format for the blog pages
# ---------------------------------------------------------------------------------------------------------- Commit your changes to the repository
- Go to
Settings > Pages > Source, change the main branch tomainand save. - GitHub will now deploy your website (~2mins)
- Go the URL
https://{github username}.github.io/{repository name}/to view your site. - Congratulations! Your website is public [live example].
To get a local copy up and running follow these simple steps.
If you're completely new to Jekyll, I recommend checking out the documentation at http://jekyllrb.com or there's a tutorial by Smashing Magazine.
$ git clone [email protected]:craig-shenton/nhsuk-static-jekyll.git
$ cd nhs.pycom
$ gem install bundler
# If you don't have bundler installed
$ bundle installIt's important to also check your version of Jekyll since this project uses new baseurl features that are only supported in 3.3+.
Fork the repo, and then clone it so you've got the code locally.
The _config.yml located in the root of the Mixyll directory contains all of the configuration details
for the Jekyll site. The defaults are:
# Site settings
title: Repo Name
email: [email protected]
author: your name
description: "Repo description"
baseurl: ""
url: "http://github-username.github.io"
# Build settings
markdown: kramdown
permalink: pretty
paginate: 3Then, start the Jekyll Server. I always like to give the --watch option so it updates the generated HTML when I make changes.
$ jekyll serve --watchNow you can navigate to localhost:4000 in your browser to see the site.
You can host your Jekyll site for free with Github Pages. Click here for more information.
In addition to your github-username.github.io repo that maps to the root url, you can serve up sites by using a gh-pages branch for other repos so they're available at github-username.github.io/repo-name.
This will require you to modify the _config.yml like so:
# Site settings
title: Repo Name
email: [email protected]
author: your name
description: "Repo description"
baseurl: "/repo-name"
url: "http://github-username.github.io"
# Build settings
markdown: kramdown
permalink: pretty
paginate: 3This will ensure that the the correct relative path is constructed for your assets and posts. Also, in order to run the project locally, you will need to specify the blank string for the baseurl: $ jekyll serve --baseurl ''.
You will also need to tweak the header include /{{ site.baseurl }}:
<header class="site-header px2 px-responsive">
<div class="mt2 wrap">
<div class="measure">
<a href="{{ "/" | relative_url }}" class="site-title">{{ site.title }}</a>
<nav class="site-nav">
{% include navigation.html %}
</nav>
</div>
</div>
</header>A relevant Jekyll Github Issue: jekyll/jekyll#332
The contact form uses http://formspree.io. It will require you to fill the form out and submit it once, before going live, to confirm your email.
More setup instructions and advanced options can be found at http://formspree.io
To configure Disqus, set up a Disqus site with the same name as your site. Then, in _config.yml, edit the disqus_shortname value to enable Disqus.
All variables can be found in the _sass/_variables.scss file, toggle these as you'd like to change the look and feel of Mixyll.
If you would like to add a fade-in-down effect, you can add animated: true to your _config.yml.
AnchorJS: A JavaScript utility for adding deep anchor links to existing page content. AnchorJS is lightweight, accessible, and has no dependencies. You can turn it on by toggling enable_anchorjs. Because it offers many ways for customization, tweaks should be done in _includes/footer.html. Default settings after turning AnchorJS on are:
<script>
anchors.options.visible = 'always';
anchors.add('article h2, article h3, article h4, article h5, article h6');
</script>See documentation for more options.
You can measure visits to your website either by using Google Analytics tracking embed or the more advanced Google Tag Manager container.
- For Google Analytics set up the value for
google_analytics, it should be something likegoogle_analytics: UA-XXXXXXXX-X. - For Google Tag Manager set up the value for
google_tag_manager, it should be something like:google_tag_manager: GTM-XXXXX. - Do not set both of above methods because this will cause conflicts and skew your reporting data.
- Remember that you need to properly configure the GTM container in its admin panel if you want it to work. More info is available in GTM's docs.
Your website is, by default, set to be allowed for crawling and indexing by search engines. (Unless you made yourself a custom robots.txt file). You can use front matter settings on each page to control how search engines will it. Sometimes you may want to exclude a particular page from indexing or forbid Google to store a copy of your page in its cache. It is up to you. Use the meta_robots frontmatter key and assign values based on this table. Some examples:
# exclude page from index
meta_robots: noindex
# allow indexing, disallow caching
meta_robots: noarchive
# allow indexing, disallow crawling links
meta_robots: nofollow
# disallow indexing, follow links
meta_robots: noindex,followIn order to get more information about your website's status in search engines, you can register it in Google Search Console and/or Bing Webmaster Tools. Both these tools will ask you to authorize your website with them and there are couple of ways to do that. Mixyll supports verification via meta tags - just fill in values for google_verification and/or bing_verification in _config.yml, the verification strings and meta tags will then be added automatically.
If search engine optimization is your thing, you can also set up meta_description values for each page/post. By default Mixyll uses summary to populate the <meta name="description" content="..."> tag and falls back to description from _config.yml if summary is not present in page/post's front matter. The summary is also used for generating Open Graph tags. Why would you want to use a dedicated variable for meta description? Because character limit to properly display this description in search results (as a snippet) is way smaller than in Open Graph. It is recommended to keep it at 155-160 characters, for more in-depth info read this article.
And lastly - if you happen to write in language other than English be sure to change og_locale in _config.yml to reflect it.
If git remote -v doesn't have an upstream listed, you can do the following to add it:
git remote add upstream https://github.com/{{ site.github_username }}/{{ site.baseurl }}.git
git pull upstream master
There may be merge conflicts, so be sure to fix the files that git lists if they occur. That's it!
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
See CONTRIBUTING.md for detailed guidance.
Distributed under the MIT License. See LICENSE.md for more information.
- Splash Photo by Unsplash