212 lines
12 KiB
Plaintext
212 lines
12 KiB
Plaintext
|
|
Episode: 1577
|
||
|
|
Title: HPR1577: Introducing Nikola the Static Web Site and Blog Generator
|
||
|
|
Source: https://hub.hackerpublicradio.org/ccdn.php?filename=/eps/hpr1577/hpr1577.mp3
|
||
|
|
Transcribed: 2025-10-18 05:13:35
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
This episode of HBR is brought to you by Ananasthost.com.
|
||
|
|
Get 15% discount on all shared hosting with the offer code HBR15.
|
||
|
|
That's HBR15.
|
||
|
|
Better web hosting that's AnastomFair at Ananasthost.com.
|
||
|
|
Hello and welcome to this episode of Hacker Public Radio.
|
||
|
|
My name is Steve, also known as Gatarmann in the free node on Cast Planet IRC room.
|
||
|
|
Welcome to this episode.
|
||
|
|
Today I'm going to be speaking about Nikola or Nikola, the static website generator based on Python.
|
||
|
|
So you may be asking yourself, although it may be self-explanatory, what is a static website generator?
|
||
|
|
Well, how it works is it generates posts and pages via commands from the command line.
|
||
|
|
So you issue commands and it will create a page or a post and you edit those pages and posts in a text editor.
|
||
|
|
And then you run a command to build the website.
|
||
|
|
And finally, you deploy or upload the generated HTML files to your web host.
|
||
|
|
You might be thinking, well, that sounds kind of old school.
|
||
|
|
Are you sure that's Web 3.0?
|
||
|
|
It's old school and new school, in my opinion.
|
||
|
|
Nikola gives you CMS-like features without the overhead of the database server and page rendering engine.
|
||
|
|
So that's sounding kind of cool, right?
|
||
|
|
You're thinking, where can I get this?
|
||
|
|
Well, I'm glad you asked.
|
||
|
|
You can go to GetNikola.com and it's N-I-K-O-L-A as in Nikola Tesla or Nikola Tesla.
|
||
|
|
So how can I install it is what you're asking.
|
||
|
|
You can use PIP and follow the handbook on the GetNikola website.
|
||
|
|
Just a note, Python 2.6 or newer or Python 3.3 or newer is required.
|
||
|
|
So you'll issue pseudo-PIP install Nikola.
|
||
|
|
You'll hit Enter and it'll do a bunch of fun stuff.
|
||
|
|
And when that's done, you'll issue pseudo-PIP install Nikola square bracket
|
||
|
|
extras, square brackets, so opening and closing brackets there.
|
||
|
|
Not to worry, there's show notes so you can follow those.
|
||
|
|
You should be good to go after that.
|
||
|
|
If you are in the terminal window, which you should be after issuing those commands,
|
||
|
|
you can enter Nikola space help in a terminal and you'll get a list of commands.
|
||
|
|
So why don't we create a skeleton website just to see what this is all about?
|
||
|
|
So the command you issue for that is Nikola space init space my site.
|
||
|
|
You will need to answer some questions now.
|
||
|
|
I just so you know a directory is going to be created based on the name that you give it there.
|
||
|
|
In my instance here, I chose my site, so it'll create a directory called my site.
|
||
|
|
You should enter say your domain name, for instance, if that's what you're doing.
|
||
|
|
My site is just an example.
|
||
|
|
So it'll ask you some questions at this point to populate the comp.py file in the directory.
|
||
|
|
Questions like the site title, the site author, the site author email, the site description,
|
||
|
|
the site URL, languages to support, time zone and what comments system you want to use.
|
||
|
|
So you have an option of using discus or Facebook or Google plus.
|
||
|
|
There's another one or two after that.
|
||
|
|
I believe I chose discus just because that was sort of the default suggestion.
|
||
|
|
And discus allows somebody to sign in with their Facebook or Google accounts.
|
||
|
|
So it seemed like maybe that was the right way to go for me.
|
||
|
|
So once that's all finished and you type in those values and hit enter,
|
||
|
|
you're going to get a directory that has some files in it.
|
||
|
|
In my case, it was my site.
|
||
|
|
So if I CD space my site and hit enter, I'll go into that directory and I'll see what I have.
|
||
|
|
You can type ls and hit enter and see what files are in there.
|
||
|
|
You should see comp.py that's your configuration file files, which is where you'll place your
|
||
|
|
images for your posts and pages and reference those in your blog posts and pages.
|
||
|
|
Galleries where you can serve up images in a gallery listings.
|
||
|
|
I haven't used that one yet.
|
||
|
|
Posts, which is where your blog posts go and stories, which is where your pages go.
|
||
|
|
So that's all well and good.
|
||
|
|
But we want to do something with this site.
|
||
|
|
So let's create a blog post.
|
||
|
|
To do that, you issue Nicholas, space, new underscore post and hit enter.
|
||
|
|
Now you're going to be asked to type in the title of your blog post.
|
||
|
|
And then you'll hit enter.
|
||
|
|
I'll use Fubar in this example.
|
||
|
|
It'll report the new posts in posts slash Fubar dot RST.
|
||
|
|
What you want to do now is fire up your favorite text editor and edit that file.
|
||
|
|
So go ahead and do that.
|
||
|
|
There's a header area at the top of the file.
|
||
|
|
Most of it is already filled in for you and you won't need to change this.
|
||
|
|
But you should add a tag because you can see that you can see your posts by tag.
|
||
|
|
If you do that on your website, and that's a good way of grouping like
|
||
|
|
information so that people can just see all the posts relating to that subject.
|
||
|
|
So these are separated by commas.
|
||
|
|
So if you have multiple tags for the one post,
|
||
|
|
you'll type in the name of your first tag, comma, space, the name of the next,
|
||
|
|
and so on and so forth.
|
||
|
|
You can enter a description in the description area.
|
||
|
|
And now move into the right your post here area and go to town.
|
||
|
|
Just erase that and write your post, write anything you want.
|
||
|
|
After that, well, actually, while you're doing that, you should read up on how to use
|
||
|
|
restructured text, which is the default.
|
||
|
|
You can choose Markdown, but I chose to use what they sort of default to,
|
||
|
|
which is restructured text.
|
||
|
|
And there's a quick start on learning how to use that.
|
||
|
|
The markup is quite similar to Markdown.
|
||
|
|
And you actually, I think, one of the best ways to learn is to just actually go to thegetnacola.com
|
||
|
|
website. And if you click source on one of their pages, you're going to see what they actually
|
||
|
|
issued in their file to get italics and get bold.
|
||
|
|
And that sort of thing, just some basics are a single star, your word, and then star
|
||
|
|
will be making that word italic.
|
||
|
|
Two stars, the word, and two stars will make it bold.
|
||
|
|
And a single space between an item, so a star, space, whatever, enter, star, space, whatever,
|
||
|
|
will give you bullet points.
|
||
|
|
Lastly, images, two periods, space, image, colon, colon, space,
|
||
|
|
slash files, slash imagefile9.jpg, or PNG.
|
||
|
|
That'll point to an image file that you've placed in the files directory.
|
||
|
|
So whatever you have copied into there, there is a way that you can make it display a certain
|
||
|
|
size and whatnot through some of that restructured markup.
|
||
|
|
For me, I just size the image in gimp and let that be the way that it gets handled.
|
||
|
|
All right, so I'm rambling.
|
||
|
|
Let's actually see what happens here.
|
||
|
|
We need to build the site and then we want to serve it up on the local web server and view it
|
||
|
|
in our browser to do that in the command line.
|
||
|
|
You type Nicolas space build and hit enter.
|
||
|
|
It'll go ahead and build the pages.
|
||
|
|
And then after that's completed, you'll type in Nicolas space serve space minus B.
|
||
|
|
What'll happen now is your default web browser will launch
|
||
|
|
and you will see your site with the blog post.
|
||
|
|
So save for the moment you've just created your first blog post.
|
||
|
|
So all the generated files you would upload to your web post, they're in the output folder.
|
||
|
|
Okay, so that's great.
|
||
|
|
But I want to add pages and have it on my navigation window.
|
||
|
|
So let's do that.
|
||
|
|
To do that, you type in Nicolas space new underscore post space minus P.
|
||
|
|
Enter a name for it and press enter.
|
||
|
|
In my case, I'll call it my page.
|
||
|
|
It tells you your page and the story's directory.
|
||
|
|
And it shows you how it named the file.
|
||
|
|
So in my case, it's my page.rst.
|
||
|
|
Open that up in a text editor and compose your page and save it when you're done.
|
||
|
|
So that would be great, but it's not showing up in your navigation yet.
|
||
|
|
You need to put that in your comf.py file.
|
||
|
|
So fire that up in your favorite text editor and do a search for all capitals navigation
|
||
|
|
underscore links.
|
||
|
|
Observe how the existing pages are linked and follow that format.
|
||
|
|
Here's how I would add my page.
|
||
|
|
Open bracket quotation mark,
|
||
|
|
forward slash stories, forward slash my page.html quotation comma space quotation mark,
|
||
|
|
my page quotation closing bracket comma.
|
||
|
|
Any page you create will show up in stories.
|
||
|
|
So don't forget to put that in the path.
|
||
|
|
Save that and rebuild your site.
|
||
|
|
Now actually a word on that as of today,
|
||
|
|
Nikola version 7.0.1 requires a special command to include new pages in the navigation.
|
||
|
|
This has been fixed and get, but currently the version after that hasn't been released yet.
|
||
|
|
So you'll issue Nikola space build space minus a and hit enter.
|
||
|
|
And after that's completed, you'll hit Nikola space serve space minus B and hit enter.
|
||
|
|
Now you're viewing it and you can see your page is now in navigation.
|
||
|
|
And you see your blog post there. That's awesome.
|
||
|
|
So this site might look a little bit plain.
|
||
|
|
You're thinking, how can I theme it?
|
||
|
|
Well, I'm glad you asked.
|
||
|
|
I'm going to tell you you issue this command.
|
||
|
|
Nikola space boot swatch underscore theme space minus N space custom underscore theme space.
|
||
|
|
minus S space slate space minus P space boot strap three and hit enter.
|
||
|
|
Now you have set it up to use the slate boot swatch theme.
|
||
|
|
You can review the themes on boot swatch dot com.
|
||
|
|
So in order to let Nikola know to use the new theme, you need to edit the conf.py file
|
||
|
|
and look for theme and change the value from bootstrap three to custom underscore theme.
|
||
|
|
The good news is it actually tells you that after you issue the command,
|
||
|
|
but just in case you missed it, that's what you do.
|
||
|
|
And then of course you got to rebuild your site.
|
||
|
|
So Nikola space build Nikola space serve dash B,
|
||
|
|
which will fire up the local web server instance and show you the page in your favorite web browser.
|
||
|
|
Now you've changed the theme.
|
||
|
|
You can take it as far as you want.
|
||
|
|
You can change the theme.
|
||
|
|
There's actually guidance on hacking the theme on their website as well.
|
||
|
|
Now there are ways to deploy your website via our sync or SFTP commands.
|
||
|
|
Currently, I'm manually uploading those via SFTP,
|
||
|
|
but I hope to set up an auto deploy option in the future.
|
||
|
|
There are other things you can do and set in the conf.py file,
|
||
|
|
such as Google Analytics.
|
||
|
|
You can also add an embedded duck.go or Google search engine search.
|
||
|
|
You can specify options for image galleries as well.
|
||
|
|
And there's other cool things like if you look at the restructured text extensions,
|
||
|
|
also on the getnicola.com website.
|
||
|
|
You can do things like embed soundcloud.
|
||
|
|
I've embedded a YouTube video on my website just to give you an example.
|
||
|
|
And there's syntax.
|
||
|
|
It's all very similar.
|
||
|
|
You issue two periods and you type in the short code and the URL, etc.
|
||
|
|
It's nicely documented.
|
||
|
|
I hope that helps.
|
||
|
|
I hope that has peaked your interest
|
||
|
|
in getting you started checking out Nikola.
|
||
|
|
And I hope you enjoy it as much as I do.
|
||
|
|
If you have questions, comments,
|
||
|
|
you can find me on the augcastplanet.net IRC room on free node.
|
||
|
|
Or you can go to stevebear.com and click tags.
|
||
|
|
Click HPR and leave a comment on this episode's blog post.
|
||
|
|
Prior to signing off here, I have to make mention
|
||
|
|
that what inspired this actually was the fellow who made the episode on Octopress.
|
||
|
|
I thought that was quite cool.
|
||
|
|
And that turned me on to this whole idea of static site generation.
|
||
|
|
I thought Octopress was quite cool.
|
||
|
|
But since I'm trying to learn Python in my spare time,
|
||
|
|
I thought it was best to go with something that was Python based.
|
||
|
|
And that's how I found this one.
|
||
|
|
I looked at a few and this one seemed to be the the best one for my tastes.
|
||
|
|
All right, well, thank you for listening.
|
||
|
|
We'll see you next time.
|
||
|
|
Cheers.
|
||
|
|
You've been listening to HECCA Public Radio at HECCA Public Radio.org.
|
||
|
|
We are a community podcast network that releases shows every weekday, Monday through Friday.
|
||
|
|
Today's show, like all our shows, was contributed by an HPR listener like yourself.
|
||
|
|
If you ever thought of recording a podcast,
|
||
|
|
then click on our contributing to find out how easy it really is.
|
||
|
|
HECCA Public Radio was founded by the Digital Dove Pound and the Infonomicon Computer Club.
|
||
|
|
And it's part of the binary revolution at binwreff.com.
|
||
|
|
If you have comments on today's show, please email the host directly.
|
||
|
|
Leave a comment on the website or record a follow-up episode yourself.
|
||
|
|
Unless otherwise stated, today's show is released under Creative Commons,
|
||
|
|
Attribution, ShareLight, 3.0 license.
|