Modify index.html in hugo - go

I'm just getting started in the hugo quickstart tutorial.
Looking here, it suggests I ought to be able to modify the home/default/root index.html by creating an _index.md file.
$ hugo new site quickstart
Congratulations! Your new Hugo site is created in ~/quickstart.
Just a few more steps and you're ready to go:
1. Download a theme into the same-named folder.
Choose a theme from https://themes.gohugo.io/, or
create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".
Ok, let's try to modify the home page!
[~/quickstart]$ hugo new index.md
[~/quickstart/content/index.md created
[~/quickstart]$ hugo new _index.md
[~/quickstart/content/_index.md created
I've edited both of those, to the effect of:
---
title: "Welcome"
date: 2017-10-13T20:31:39-05:00
draft: false
---
# This is a website!
Why nothing appears?
But when I run
[~/quickstart]$ hugo server -D
Started building sites ...
Built site for language en:
0 draft content
0 future content
0 expired content
1 regular pages created
6 other pages created
0 non-page files copied
0 paginator pages created
0 tags created
0 categories created
total in 5 ms
Watching for changes in ~/quickstart/{data,content,layouts,static}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
I see this, no content:
Is there anything else I need to do? A build or markdown or render step or something?

You don't need the index.md but you do need the _index.md. You can delete it.
In your layouts folder create a file named index.html. That's your template html file for the site's root page. Now add your basic boilerplate doc/html markup. That allows the the server to inject a Javascript auto-reload script. Now refresh your browser to pickup the script.
Now you are ready to play. in the body tag add {{.Title}} and watch the browser update.

Related

Add page via API

I run a little lektor blog and want to add a number of pages that I created using a python script. However, after copying the created content folders with their resp. content.lr files into my blog folder, those new pages do not show. Is there an API way of adding pages? Or do I have to use the admin UI to add a page? Didn't found anything in the docs so far.

Use multiple themes on one website jeykll

I have recently found out about jekyll, and want to make a project landing page with it. I would like to have a home page using one theme (e.g. ubuild) and have another page for the docs (accessed via a navigation bar at the top) that uses a different theme (e.g. just-the-docs). How can I go about doing this?
EDIT: I want to use Github Pages for this.
Since you plan to use one of the themes on just a single page, I think the best solution would be to use two base layouts instead of two themes.
It will take some minor work initially, but will greatly ease future maintenance.
First set up the site to render just-the-docs theme for all pages including the landing page. Then modify _layouts/home.html to be a parent layout (like the default layout)
to render the markup from the ubuild.. theme.
I solved this with help from #JoostS's answer but with a few modifications:
Make an organization on GitHub pages with a repo called <org-name>.github.io. This repo should contain the theme for the home page (ubuild in my case) and all the content for it.
Make another repo with a jeykll site, called docs. This site should have the theme you want for the other page (just-the-docs in my case) and all the content along with it.
In the docs repo, add baseurl: "/docs" to your _config.yml
The <org-name>.github.io repo, should now be hosted at <org-name>.github.io/:
The docs repo should now be hosted at the <org-name>.github.io/docs url:
To link to the docs page, you should just be able to use /docs now.
The solution is to create two separate websites. The first site contains just the homepage and should be deployed to the root of your web folder. The second site contains all docs and should be deployed to a subdirectory, like '/docs/'. You might want to use baseurl for this: https://byparker.com/blog/2014/clearing-up-confusion-around-baseurl/
I do not think you can use this solution on Github pages. You can TRY to add the same CNAME to both repositories, as I am not 100% sure. Any other static hosting environment should work.
You can link from the docs to the homepage by linking to '/'. You can link from the homepage to the docs by linking to '/docs/pagename/' (assuming you use permalink: pretty).
The simplest way to maintain two layouts on the same site using Jekyll with GitHub Pages is for you to create a new repository for the new layout, so the main site is in a GitHub organization and the pages that need to use a different layout must be in your repositories.
However, if you are not using GitHub, just jekyll, just configure each folder as a new Jekyll project, and direct them to write to the respective subfolders in the _site folder. For everything to work out you need to start Jekyll Server from the main folder, and then build each subfolder separately, so it will update without removing the main one

local images are not displayed, in octopress

I create a post and hope to display some local images, so I put some images in the folder of source/images/my_dir/image.jpg
And then I use the following two ways to display the pictures.
![method 1](../images/my_dir/image.jpg)
![method 2](http://my_username.github.io/my_dir/image.jpg)
And then I generate the post and deploy to github page.
I can see that the images is copied in the folder of _deploy/images/my_dir/
But method 1 is not working, instead, method 2 is working. Why is that?
PS:I am using windows7 to write the post in markdown pad.
In your atom.xml all img src must be of the form ![method 2](http://my_username.github.io/my_dir/image.jpg). Feeds reader must have resources full urls to display them correctly.
In your post it's ![method 1](/images/my_dir/image.jpg)
Apparently, jekyll is enabled by default and will skip directories that begin with "_". To disable the behaviour, drop an empty file named ".nojekyll" in the root dir.
More info here
Yes, it drove me mad too.

Clean URLs from pages in a custom Jekyll folder

I'm building a Jekyll site made of static pages (e.g. nothing in the _posts directory), and rather than keeping each page in the root directory, I'd like to keep it in a custom pages directory (for organization's sake).
However, I don't want this structure reflected in my URLs, so in my _config.yml I have:
permalink: /:title
With this configuration, my desired URL would be site.com/pagename, but I don't get a rendered page unless I hit site.com/pages/pagename.html.
Could anyone help me configure my build to achieve the former? Thanks!
Have you tried adding YAML Front Matter to these static pages? For example:
---
title: "pagetitle"
---
This way, Jekyll should recognize it as a Page (instead of a StaticPage) and would use your permalink configuration.
These are static pages so the entry in _config.yml is going to be ignored.
From the sounds of it you will need to create a URL rewrite rule. How to do this will depend on the web server that is servering up the pages.

How can I create a page in jekyll?

I know how to create a post in jekyll, but how can I create a page (like About) without it being considered as a post?
Also, I use Github pages, so I can't use extensions.
If you create a file called about.html, about.markdown or about.textile in the root of your project it will be treated as a static page.
You can still give it some YAML front matter and jekyll if you wish to share a template etc.
It's all explained on the jekyll wiki at https://github.com/mojombo/jekyll/wiki/usage
Here's an excerpt from my about.markdown file
---
layout: default
title: About | Purebreeze
---
I'm a software developer based in London...
That's saying use the default template, set title to "About | Purebreeze" (which is rendered via a liquid tag in my default template) and then the contents of my about page.
This is then rendered at http://purebreeze.com/about by github (by default this would have been (http://levent.github.com/about)
This looks like a bug. But there's a workaround: create a directory called eg. "about" and put your content into about/index.[fill in the blank]. (oh, and by the way, report it.)

Resources