New Theme
This commit is contained in:
44
_projects/install.md
Normal file
44
_projects/install.md
Normal file
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: Install and Use Friday Theme
|
||||
---
|
||||
|
||||
## About
|
||||
|
||||
Friday Theme creates a web site that works as a personal homepage with an about section, a blog supporting tags and a collection of projects.
|
||||
|
||||
It is quick to configure and simple to use. It is styled almost entirely with Bootstrap 4 so you can roll your own Bootstrap 4 theme for complete customisation.
|
||||
|
||||
I'm assuming you have Jekyll installed already. If not, [look here.](https://jekyllrb.com/docs/installation/)
|
||||
|
||||
The installation instructions below are Linux-flavoured instructions. There's some notes on the Jekyll site [about running it on Windows](https://jekyllrb.com/docs/windows/).
|
||||
|
||||
## Download and Install
|
||||
|
||||
1. Create a directory for your new site.
|
||||
2. Download this repo into it from [GitHub](https://github.com/sfreytag/friday-theme). (Sorry, this theme is not available as a theme gem yet).
|
||||
3. cd to your directory and run `jekyll serve`. This theme uses `markdown` and `pygments` so if they are missing, install them with `gem install pygments`, etc
|
||||
4. Open the resulting site (probably `http://localhost:4000`) in your browser to check it works
|
||||
|
||||
If it does, you can begin customising it.
|
||||
|
||||
## Configuration
|
||||
|
||||
Open `_config.yml` and change the `title` and `name` fields to your settings. Copy your own avatar image to `/theme/img/avatar.jpg` - it helps if this image is square.
|
||||
|
||||
Set a `baseurl` if needed. This lets you run your site under a folder like `/site` if need be.
|
||||
|
||||
## Tweak the Data Files
|
||||
|
||||
There's two data files that help create elements of the web site.
|
||||
|
||||
1. `_data/nav.yml` - use this to build a list of links that will be in the top nav bar. The defaults expose all elements of the theme. If you delete eg the about page, don't forget to edit this file. The Jekyll build will not warn you, because this file cannot use the `{% raw %}{% link %}{% endraw %}` tag.
|
||||
|
||||
2. `_data/profile.yml` - this contains a list of links that will be in the left-hand profile bar. Typical usage would be to add your social media and other portfolio links.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
17
_projects/styling.md
Normal file
17
_projects/styling.md
Normal file
@@ -0,0 +1,17 @@
|
||||
---
|
||||
title: Change the Appearance of Friday Theme
|
||||
---
|
||||
|
||||
## Changing the Style
|
||||
|
||||
The main stylesheet is `theme\css\site.scss`. This is the one that pulls everything together and creates the final, built output. So if you want to import other SCSS, add it here.
|
||||
|
||||
This theme does not use its own SCSS or CSS apart from a few layout tweaks in `theme/_sass/_theme.css`.
|
||||
|
||||
You can modify the appearance by customising Bootstrap directly by overriding its SCSS variables. There are some notes in the top of `theme\_sass\_variables.scss` about how to do this.
|
||||
|
||||
This theme also bundles `syntax.css` for the pygments highlighting. It is the monokai theme. You can get other syntax.css files from various places. [Here](http://jwarby.github.io/jekyll-pygments-themes/languages/javascript.html) is quite a good one, with previews of a few languages.
|
||||
|
||||
## Changing the Theme's HTML
|
||||
|
||||
This is Jekyll so you are able to dive into the HTML and make this theme do what you need. The `list` directory contains the two files responsible for listing posts and projects. Quite a few chunks of HTML are tidied off into `_layouts/components`. Otherwise everything else should be standard Jekyll.
|
||||
15
_projects/writing.md
Normal file
15
_projects/writing.md
Normal file
@@ -0,0 +1,15 @@
|
||||
---
|
||||
title: Writing Content for Friday Theme
|
||||
---
|
||||
|
||||
## Writing Content
|
||||
|
||||
1. `_pages/index.md` - this is the default home page.
|
||||
2. `_includes/components/intro.md` - this chunk is reused between the top of the homepage and the top of the about page.
|
||||
3. `_pages/about.md` reuses the intro and adds a bit more content about yourself.
|
||||
4. `_posts` is the default Jekyll collection of blog posts. Each post has a list of tags. These lists are combined into a tag cloud on the post list page.
|
||||
5. `_projects` is a directory of project pages. These are not organised into a collection. Each page can hold a description or documentation about a hobby or open-source project.
|
||||
|
||||
## HTML Content
|
||||
|
||||
Jekyll lets you mix HTML into Markdown in the content, so it is possible to add HTML content. You can use this to utilise Bootstrap 4's components. The [blog posts]({% link list/posts.html %}) have some examples.
|
||||
Reference in New Issue
Block a user