hugo-theme-introduction/README.md

89 lines
5.2 KiB
Markdown
Raw Normal View History

2018-07-18 15:39:54 +00:00
# Introduction theme for Hugo
2018-06-10 10:23:51 +00:00
[![Build Status](https://travis-ci.com/vickylai/hugo-theme-introduction.svg?branch=master)](https://travis-ci.com/vickylai/hugo-theme-introduction)
2018-07-18 15:39:54 +00:00
![Latest Release](https://img.shields.io/github/tag/vickylai/hugo-theme-introduction.svg)
2017-03-13 09:14:02 +00:00
A minimal, smooth-scrolling theme for Hugo. Can be configured as a single page site or full-featured site with many sections.
2017-03-13 09:14:02 +00:00
2018-05-22 00:15:05 +00:00
![Main page screenshot](https://github.com/vickylai/hugo-theme-introduction/blob/master/images/screenshot.png)
2017-03-13 09:45:32 +00:00
2017-03-13 09:14:02 +00:00
Features:
- Minimalist home page
2017-04-22 01:37:11 +00:00
- About section with profile photo
- Contact section with option to show your local timezone
- Optional Projects and Blog sections
2017-05-14 07:19:04 +00:00
- Light and Dark themes
- Browser friendly CSS fade-in effect for some pizzaz
2017-04-22 01:37:11 +00:00
- Smooth scroll-to-section navigation
- Responsive and fast
2017-03-13 09:14:02 +00:00
2018-07-26 23:33:44 +00:00
## Getting started
### Requirements
- [Hugo](https://gohugo.io/getting-started/installing/) extended version 0.45 or greater
- [autoprefixer](https://github.com/postcss/autoprefixer): `npm install -g autoprefixer`
- [postcss-cli](https://github.com/postcss/postcss-cli):`npm install -g postcss-cli`
2017-03-13 09:14:02 +00:00
2018-07-18 15:39:54 +00:00
### Get the theme
Run from the root of your Hugo site:
2017-03-13 09:14:02 +00:00
```sh
2018-07-18 15:39:54 +00:00
$ git clone https://github.com/vickylai/hugo-theme-introduction.git themes/introduction
2017-03-13 09:14:02 +00:00
```
2018-07-18 15:39:54 +00:00
Alternatively you can include this repository as a [git submodule](https://git-scm.com/book/de/v1/Git-Tools-Submodule). This makes it easier to update this theme if you have your Hugo site in git as well. For this you need to run:
```sh
$ git submodule add https://github.com/vickylai/hugo-theme-introduction.git themes/introduction
```
### Configure your site
2017-03-13 09:14:02 +00:00
From the exampleSite, copy `config.toml` to the root folder of your Hugo site and change the fields as you like.
2018-07-26 23:33:44 +00:00
The following explains how to add content to your hugo site. Introduction ships with an fully configured example site. For a quick preview just go into `exampleSite/` and run `hugo --themesDir ../..`. If you have configuration problems, you might want to check out how its done in `exampleSite/`.
2017-03-13 09:14:02 +00:00
2018-07-26 23:33:44 +00:00
### Home page
Content for the home page lives under `content/home/`. Create `index.md` (`hugo new home/index.md`) and set a *title*. The content of this file will be shown as a tag line. You might want to set [*headless*](https://gohugo.io/content-management/page-bundles/#headless-bundle) to `true`. You may add more files to the home section. They show up automaticity on the home page and can be ordered via *weight*. You can set *image* for a page to show an image on the left side. The image has to be placed inside `content/home`.
2017-03-13 09:14:02 +00:00
2018-07-26 23:33:44 +00:00
You may add a contact section by creating
`contact.md` (`hugo new home/contact.md`). This will allways be shown last on the home page.
2017-03-13 09:14:02 +00:00
2018-07-26 23:33:44 +00:00
### Projects section
Introduction provides an easy way to your projects. You can even add a gallery to your projects. Start by creating an index file (`hugo new projects/_index.md`), which you needs a *title*. You can also add some text.
2017-03-13 09:14:02 +00:00
2018-07-26 23:33:44 +00:00
Now you are ready to add some projects. Jet again, create an index file (`hugo new creating/YourProjectName/index.md`). You can add *external_link* to create a link to a website. Or add images to your project by placing them in the same folder as the index file you just created. If you add more then one photo, a gallery will be created. Images are ordered by there filename. The first image will be used as a project preview image. If you want to change the order of your image, you can do this by adding *weight* to some image via font matter in your index file:
2017-03-13 09:14:02 +00:00
```
2018-07-26 23:33:44 +00:00
resources:
- src: NameOfYourImage.jpg
params:
weight: -100
2017-03-13 09:14:02 +00:00
```
2018-07-26 23:33:44 +00:00
The projects themself can also be ordered by *weight*.
2017-03-13 09:14:02 +00:00
2018-07-26 23:33:44 +00:00
### Blog section
Creating a blog section is quite simple with Introduction. Just add an index file for the section (`hugo new blog/_index.md`). Then you can create as many blog entry as you like via (`hugo new blog/YourEntryTitle.md`). They will also automaticity appear on the home page.
2017-11-13 21:01:53 +00:00
2018-07-26 23:33:44 +00:00
## Advanced configuration
### Multilingual Mode
You can create a multilingual website with Introduction. The default config file even contains all necessary configuration option. You just have to adjust the accordingly.
2017-11-13 21:01:53 +00:00
2018-07-26 23:33:44 +00:00
Introduction ships with some translation. If you want to add a new language, you have to add a necessary translations to `i18n`. See the [hugo documentation](https://gohugo.io/content-management/multilingual/) for more details.
2017-11-13 21:01:53 +00:00
2018-07-26 23:33:44 +00:00
### Menu
Introduction contains a default menu. If you want to override this, you can do so by defining a *menu.main* in your config file.
2017-11-13 21:01:53 +00:00
2018-07-26 23:33:44 +00:00
### Disqus and Google Analytics
Introduction supports comments from Disqus. You just have to set *disqusshortname* in your config file.
2017-11-13 21:01:53 +00:00
2018-07-26 23:33:44 +00:00
It also offers tracking via Google Analytics. For this to work, you have to set *googleAnalytics*.
2017-11-13 21:01:53 +00:00
2018-07-26 23:33:44 +00:00
## Custom css
You can add custom css files by placing them under `assets/` and adding the path to your css file to *customCSS* in your config file.
2017-11-13 21:01:53 +00:00
2018-07-18 15:39:54 +00:00
## Contributing
2017-11-13 21:01:53 +00:00
Pull requests for bug fixes and suggestions are welcome.
2018-05-22 00:15:05 +00:00
Contributors are listed in [CHANGELOG.md](https://github.com/vickylai/hugo-theme-introduction/blob/master/CHANGELOG.md). Thank you so much! 🖤
2018-06-08 21:31:55 +00:00
2018-07-18 15:39:54 +00:00
## License
Copyright (C) 2018 [Vicky Lai](https://vickylai.com/introduction/)
2018-06-08 21:31:55 +00:00
2018-07-18 15:39:54 +00:00
Licensed under [AGPL-3.0](https://github.com/vickylai/hugo-theme-introduction/blob/master/LICENSE)