typos
[kengrimes.com/content.git] / content.org
1 #+hugo_base_dir: .
2 #+hugo_level_offset: 0
3 #+seq_todo: TODO DRAFT DONE
4 #+startup: indent showall
5
6 * Home
7 :PROPERTIES:
8 :EXPORT_HUGO_SECTION:
9 :END:
10 ** Computers are the Devil
11 :PROPERTIES:
12 :EXPORT_HUGO_CUSTOM_FRONT_MATTER: :header /img/blog.png
13 :EXPORT_FILE_NAME: _index
14 :EXPORT_HUGO_MENU: :menu "main" :weight -1 :title Blog
15 :END:
16
17 ** DONE Using ox-hugo To Build Websites with Emacs :org:emacs:hugo:@tutorial:
18 CLOSED: [2018-04-19 Thu 18:06]
19 :PROPERTIES:
20 :EXPORT_FILE_NAME: ox-hugo-tutorial
21 :EXPORT_HUGO_CUSTOM_FRONT_MATTER: :header /img/org.png
22 :END:
23 This article explains in detail the process of setting up a bare-bones website
24 using Hugo and Org mode. My goal in writing this is to provide readers with a
25 superior understanding of the fundamentals of this workflow. It is by no means
26 an exhaustive explanation of Org mode or Emacs, but should give readers of any
27 skill level a strong foundation to apply their own knowledge and techniques to
28 the Emacs-Hugo toolchain.
29
30 I assume only beginner-level knowledge of Emacs.
31
32 *** Intro & Setup
33 [[https://github.com/kaushalmodi][Kaushal Modi]] created ox-hugo on top of his ox-blackfriday package, providing an
34 impressive amount of features for organizing blog text and linked data with
35 Hugo. He maintains [[https://ox-hugo.scripter.co/][great documentation]] and ample [[https://github.com/kaushalmodi/ox-hugo/tree/master/test/site/content-org][examples]] for using the
36 package. I will explain my own workflow here, but for an exhaustive (though
37 terse) reference, I highly recommend Modi's [[https://ox-hugo.scripter.co/test/][test site]] and [[https://raw.githubusercontent.com/kaushalmodi/ox-hugo/master/test/site/content-org/all-posts.org][post source]] Org file,
38 which contain demonstrations and tests for all of ox-hugo's features.
39
40 After issuing the Emacs command ~M-x package-install RET ox-hugo RET~, you'll
41 need to ~require~ it. You can do this by running ~M-: (require 'ox-hugo)~, but
42 you'll want to add it to your configuration as explained [[https://ox-hugo.scripter.co/doc/usage/][here]]. Once this is
43 done, using ox-hugo is just a matter of making an Org file and writing
44 content. Org's format is very straightforward, and is designed to make sense to
45 the reader even if they're unfamiliar with the formal syntax. For instance,
46 #+begin_src org
47 ,* My food
48 | Where's My Food? | Fridge | Counter | Mouth | Total |
49 | Oranges | 1 | 3 | 0 | :=vsum($2..$4) |
50 | Marshmallows | 0 | 100 | 20 | :=vsum($2..$4) |
51 | Brussel Sprouts | 32 | 4 | 0 | :=vsum($2..$4) |
52 #+end_src
53 Produces a dynamic spreadsheet table in Org mode that exports to HTML like this:
54 **** My food
55 | Where's My Food? | Fridge | Counter | Mouth | Total |
56 | Oranges | 1 | 3 | 0 | 4 |
57 | Marshmallows | 0 | 100 | 20 | 120 |
58 | Brussel Sprouts | 32 | 4 | 0 | 36 |
59 #+TBLFM: @2$5=vsum($2..$4)::@3$5=vsum($2..$4)::@4$5=vsum($2..$4)
60
61 If you're already familiar with Org mode, the benefits are obvious and creating
62 content is fairly trivial. Org mode is, however, a complex and expansive program
63 with many features, and its learning curve can appear daunting at first glance.
64 Using ox-hugo is a great way to learn the format, since it gives the author a
65 command-center view of their entire content hierarchy, much like a traditional
66 database, but in a flat format that's much easier to read and understand. Org
67 features present themselves naturally, and the author can easily visualize the
68 correspondence between the Org format and the output on their webpage.
69
70 Just take a look at the [[https://www.kengrimes.com/gitweb/?p=kengrimes.com/content.git;a=blob_plain;f=content.org;hb=HEAD][Org file]] for this webpage. Search for "ox-hugo is super
71 cool!" and you should find this very paragraph.
72
73 Eventually you'll want to [[https://orgmode.org/manual/][read the manual]], though. You may access it in Emacs
74 with ~M-x org-info~.
75
76 *** Making a New Blog
77 Compared to a generic Org file, the only necessary data that ox-hugo needs to
78 properly export to Hugo is an ~:EXPORT_FILE_NAME:~ property in the
79 ~:PROPERTIES:~ block of an Org heading. ~:PROPERTIES:~ blocks are common in Org
80 for defining arbitrary metadata about sections, and ox-hugo uses them to
81 generate Hugo's [[https://gohugo.io/content-management/front-matter/][front matter]] (used for associating a title, header, or other
82 custom data with the page it generates). Providing an ~:EXPORT_FILE_NAME:~
83 definition signals to ox-hugo that a particular heading is available for export
84 to Hugo. For example, the ~:PROPERTIES:~ block of the page you're currently
85 reading looks like this:
86 #+begin_src org
87 :PROPERTIES:
88 :EXPORT_FILE_NAME: ox-hugo-tutorial
89 :EXPORT_DESCRIPTION: Exporting to Hugo's Blackfriday Markdown from Orgmode
90 :EXPORT_HUGO_IMAGES: /img/org.png
91 :END:
92 #+end_src
93 The ~:EXPORT_HUGO_IMAGES:~ and ~:EXPORT_DESCRIPTION:~ variables are optional
94 definitions allowed by the Speedy theme of this website, but the filename is the
95 only required property for ox-hugo. Our goal here is to organize the structure
96 of our website as a tree using Org headers. So, as a minimal example, here's
97 what a new site might look like in its entirety:
98 #+begin_src org -n
99 #+hugo_base_dir: .
100 ,* My Blog
101 :PROPERTIES:
102 :EXPORT_HUGO_SECTION:
103 :END:
104 ,** Home
105 :PROPERTIES:
106 :EXPORT_FILE_NAME: _index
107 :END:
108 This is the home of my blog!
109 ,** One Bad Night
110 :PROPERTIES:
111 :EXPORT_FILE_NAME: bad-night
112 :END:
113 Someone gave me herpes! Oh no!
114 #+end_src
115 The Org file can be placed in any directory so long as ~HUGO_BASE_DIR~ correctly
116 identifies the Hugo project's root directory. This path definition is required
117 for any valid ox-hugo file, and in the example above uses ~#+hugo_base_dir: .~
118 to specify that the base directory will be the same path as this Org file. If
119 you saved this file as hugotest.org, exported it with Org's exporter ~C-c C-e~
120 and selected the Hugo output ~H~ and the All Subtrees To Files option ~A~, you'd
121 wind up with the following files in your directory:
122 #+begin_src
123 .
124 ├── content
125 │   ├── bad-night.md
126 │   └── _index.md
127 └── hugotest.org
128 #+end_src
129 Most sites will be more than a blog, though, and will want multiple sections. In
130 fact, many sites are made up of nothing but a slew of sections that users
131 navigate between with some built-in menu. So a more functional minimal example
132 would be the following:
133 #+begin_src org -n
134 #+hugo_base_dir: .
135 ,* Homepage
136 :PROPERTIES:
137 :EXPORT_HUGO_SECTION:
138 :EXPORT_FILE_NAME: _index
139 :EXPORT_HUGO_MENU: :menu "main"
140 :END:
141 This is the home of my blog!
142 ,* Blog Posts
143 :PROPERTIES:
144 :EXPORT_HUGO_SECTION: posts
145 :END:
146 ,** My Blog Homepage
147 :PROPERTIES:
148 :EXPORT_HUGO_MENU: :menu "main"
149 :EXPORT_FILE_NAME: _index
150 :END:
151 Man, look at all my blog posts.
152 ,** One Bad Night
153 :PROPERTIES:
154 :EXPORT_FILE_NAME: bad-night
155 :END:
156 Someone gave me herpes! Oh no!
157 #+end_src
158 Which yields the following files on export:
159 #+begin_src
160 .
161 ├── content
162 │   ├── _index.md
163 │   └── posts
164 │   ├── bad-night.md
165 │   └── _index.md
166 └── hugotest.org
167 #+end_src
168 As you might expect if you're already familiar with Hugo, this structure adheres
169 to the Hugo [[https://gohugo.io/content-management/organization/][content management]] scheme. Additionally, the index files have been
170 marked with menu metadata, which allows Hugo themes to automatically generate
171 navigation menus from the markdown files. Hereafter, making new blog posts is as
172 simple as adding new sub-headings under the "Blog Posts" heading, and
173 exporting. As you can see, this is suitable for defining the hierarchical
174 structure of any general website, not just blogs. Org mode and Hugo just make
175 creating new pages so simple and well-structured that providing content is all
176 that's required for a new page, blog entry, or entirely new site section. If you
177 can blog with ox-hugo, you can deftly deploy any manner of web content, or even
178 develop entire websites as naturally as you make blog posts. Any tool that can
179 turn blogging and web development into the same task is quite an achievement!
180
181 Of course, themes to style this content are another can of worms entirely, but
182 we'll get to that soon. It is sufficient for now to mention that Hugo makes
183 [[https://gohugo.io/themes/installing-and-using-themes/][using themes]] as easy as downloading one and specifying it in Hugo's config file.
184
185 **** Heading Management
186 One question you may ask is why the blog's homepage is not defined in the *Blog
187 Posts* heading. This is a fair question! Any heading with an
188 ~:EXPORT_FILE_NAME:~ property will export /all/ of that heading's content,
189 /including subheadings/ beneath it. This allows Org headings to be used as part
190 of the content of a post, where they will be exported as markdown heading
191 levels, which translate to HTML heading elements ~<h1>~, ~<h2>~, ~<h3>~,
192 etcetera.
193
194 Furthermore, properties other than ~:EXPORT_FILE_NAME:~ are /inherited/ by
195 sub-headings, including the ~:EXPORT_HUGO_MENU:~ properties. A
196 ~:EXPORT_HUGO_MENU:~ property at the section root would cause all exported files
197 within that section to be added to the menu specified. This might be intended by
198 the content creator, but most likely you don't want every single post you make
199 to be in the main menu. So it makes sense to define all your pages, including
200 the index, as a sub-heading of the section definition (which merely specifies
201 which sub-directory the content will output to).
202
203 To illustrate, let's assume you want to extend the previous site definition with
204 a section about fishsticks.
205 #+begin_src org -n 24
206 ,* Fishsticks
207 :PROPERTIES:
208 :EXPORT_HUGO_SECTION: fishsticks
209 :EXPORT_HUGO_MENU: :menu "main"
210 :EXPORT_FILE_NAME: _index
211 :END:
212 This section devoted to Orson Wells, R.I.P.
213 ,** Van De Camps
214 :PROPERTIES:
215 :EXPORT_FILE_NAME: van-de-camps
216 :END:
217 If this is fish, I'll be a monkey's uncle.
218 ,** Gortons
219 :PROPERTIES:
220 :EXPORT_FILE_NAME: gortons
221 :END:
222 I think these gave me the herpes.
223 #+end_src
224 In this example, we've defined the main homepage of the section inside the
225 tier-1 heading for Fishsticks. This is technically valid, and produces the
226 expected file output:
227 #+begin_src
228 .
229 ├── content
230 │   ├── fishsticks
231 │   │   ├── gortons.md
232 │   │   ├── _index.md
233 │   │   └── van-de-camps.md
234 │   ├── _index.md
235 │   └── posts
236 │   ├── bad-night.md
237 │   └── _index.md
238 └── hugotest.org
239 #+end_src
240 But on inspection of the gortons.md file, we find the anomoly mentioned above:
241 #+begin_src markdown -n
242 ---
243 title: "Gortons"
244 author: ["Ken Grimes"]
245 draft: false
246 menu:
247 main:
248 weight: 2002
249 identifier: "gortons"
250 ---
251
252 I think these gave me the herpes.
253 #+end_src
254 Uh oh! Not only did these fishsticks give us herpes, they are now part of the
255 main menu. Worse, when the index page was exported, each of the subsequent posts
256 became part of its content:
257 #+begin_src markdown -n
258 ---
259 title: "Fishsticks"
260 author: ["Ken Grimes"]
261 draft: false
262 menu:
263 main:
264 weight: 1001
265 identifier: "fishsticks"
266 ---
267
268 This section devoted to Orson Wells, R.I.P.
269
270
271 ## Van De Camps {#van-de-camps}
272
273 If this is fish, I'll be a monkey's uncle.
274
275
276 ## Gortons {#gortons}
277
278 I think these gave me the herpes.
279 #+end_src
280 Tisk tisk. So be sure to put your index pages in subheadings (just as you do
281 with normal pages) so that the tier-1 heading can be used for "global"
282 definitions that affect all of the pages. A corrected section for fishsticks
283 would look like this:
284 #+begin_src org -n 25
285 ,** Fishsticks
286 :PROPERTIES:
287 :EXPORT_HUGO_SECTION: fishsticks
288 :END:
289 ,*** Fishsticks Home
290 :PROPERTIES:
291 :EXPORT_HUGO_MENU: :menu "main"
292 :EXPORT_FILE_NAME: _index
293 :END:
294 This section devoted to Orson Wells, R.I.P.
295 ,*** Van De Camps
296 :PROPERTIES:
297 :EXPORT_FILE_NAME: van-de-camps
298 :END:
299 If this is fish, I'll be a monkey's uncle.
300 ,*** Gortons
301 :PROPERTIES:
302 :EXPORT_FILE_NAME: gortons
303 :END:
304 I think these gave me the herpes.
305 #+end_src
306
307 *** Hugo Setup
308 At this point, setting up Hugo and publishing is simple. [[https://gohugo.io/getting-started/installing/][Installing]] Hugo is
309 pretty straightforward on any Unix-like system with a package manager; it is
310 available on most distributions at this point. Windows installation is a bigger
311 pain in the ass, but you should be used to that if you're still in the
312 stone-age.
313
314 Using ~hugo new site .~ on the command-line will create a new hugo site in the
315 current directory, but ~hugo~ expects to be creating a new directory with this
316 command and will complain if it already exists. It also provides the ~--force~
317 option to allow creating a new site in an extant directory, but this too will
318 fail if the *content* subdirectory already exists (which ox-hugo will create
319 when you export).
320
321 So you have three choices:
322 1. run ~hugo new site /path/to/some-new-dir~ and move your Org file to this new
323 directory
324 2. simply ~rm -Rf content/~ to remove the content directory ox-hugo created,
325 then run ~hugo new site --force .~
326 3. don't even bother with the ~hugo new site~ command, and make a *config.toml*
327 file manually (the only file really required for Hugo to run).
328
329 It's convenient to do this through the ~hugo~ command because it will create
330 Hugo-specific subdirectories like archetypes, layouts, themes, etcetera, in
331 addition to populating a basic *config.toml* file. The subdirectories it creates
332 aren't necessary, but help illustrate Hugo's structure. In any case, you'll want
333 to wind up with a directory structure something like this (created with option 2
334 above, extending from previous examples):
335 #+begin_src
336 .
337 ├── archetypes
338 │   └── default.md
339 ├── config.toml
340 ├── content
341 ├── data
342 ├── hugotest.org
343 ├── layouts
344 ├── static
345 └── themes
346 #+end_src
347 Exporting with ox-hugo using ~C-c C-e H A~ again will, as expected, fill the
348 content directory with our content.
349 #+begin_src
350 .
351 ├── archetypes
352 │   └── default.md
353 ├── config.toml
354 ├── content
355 │   ├── fishsticks
356 │   │   ├── gortons.md
357 │   │   ├── _index.md
358 │   │   └── van-de-camps.md
359 │   ├── _index.md
360 │   └── posts
361 │   ├── bad-night.md
362 │   └── _index.md
363 ├── data
364 ├── hugotest.org
365 ├── layouts
366 ├── static
367 └── themes
368 #+end_src
369
370 **** Theming
371 The last thing to do here is to download or create a theme for Hugo. As
372 mentioned before, installing a theme is very simple. This blog uses a custom
373 theme named Speedy that I have been developing to help myself learn Hugo's
374 internals, but for this example I'll be using Kaushal Modi's [[https://github.com/kaushalmodi/hugo-bare-min-theme][bare-min theme]]. The
375 bare-min theme is the best starting place out there for making new themes, and
376 outputs basic HTML pages without any need to mess with CSS or JS. It also
377 provides easy debugging facilities and search features.
378
379 So let's install it! You can download the theme from its github page and extract
380 it to the themes folder, or much more easily use git to clone it to your themes
381 directory. ~git clone https://github.com/kaushalmodi/hugo-bare-min-theme.git
382 themes/bare-min~ Then open up your *config.toml* file, and add the theme.
383 #+begin_src toml -n
384 baseURL = "http://example.org/"
385 languageCode = "en-us"
386 title = "My New Hugo Site"
387 # Adding a theme:
388 theme = "bare-min"
389 #+end_src
390 Be sure that the theme's name matches the theme directory's name in the *themes/*
391 directory of your project base directory. (e.g. *themes/bare-min* here). That's it
392 for installing the theme.
393
394 Now, running the command ~hugo~ with no subcommands will invoke the Hugo
395 generator on the current directory, and output finalized content in the
396 *public/* directory.
397 #+begin_src
398 .
399 ├── archetypes
400 │   └── default.md
401 ├── config.toml
402 ├── content
403 │   ├── fishsticks
404 │   │   ├── gortons.md
405 │   │   ├── _index.md
406 │   │   └── van-de-camps.md
407 │   ├── _index.md
408 │   └── posts
409 │   ├── bad-night.md
410 │   └── _index.md
411 ├── data
412 ├── hugotest.org
413 ├── layouts
414 ├── public
415 │   ├── categories
416 │   │   ├── index.html
417 │   │   └── index.xml
418 │   ├── css
419 │   │   └── github_chroma.css
420 │   ├── fishsticks
421 │   │   ├── gortons
422 │   │   │   └── index.html
423 │   │   ├── index.html
424 │   │   ├── index.xml
425 │   │   └── van-de-camps
426 │   │   └── index.html
427 │   ├── index.html
428 │   ├── index.xml
429 │   ├── js
430 │   │   └── search.js
431 │   ├── page
432 │   │   └── 1
433 │   │   └── index.html
434 │   ├── posts
435 │   │   ├── bad-night
436 │   │   │   └── index.html
437 │   │   ├── index.html
438 │   │   └── index.xml
439 │   ├── sitemap.xml
440 │   └── tags
441 │   ├── index.html
442 │   └── index.xml
443 ├── static
444 └── themes ...
445 #+end_src
446 Hugo, by default, generates xml files that are suitable for RSS feeds. With a
447 theme installed, Hugo will produce more suitable web content (usually HTML) to
448 be served over HTTP. The bare-min theme outputs HTML, provides CSS for doing
449 chroma-based syntax highlighting (in case you include code blocks), and inline
450 styles for basic page formatting. Generated pages also have a lot of useful
451 debugging information. You'll also notice that Hugo has generated folders for
452 "categories" and "tags". These are default organization labels for your content
453 called [[https://gohugo.io/content-management/taxonomies/][taxonomies]].
454
455 **** Taxonomies
456 The taxonomy index pages allow users to browse content by category or tag. These
457 taxonomies correspond to Org mode tags, and ox-hugo will automatically
458 associated tagged headings with the tags taxonomy, or the categories taxonomy if
459 prefixed with an @ symbol. You are free to define your own taxonomies, and even
460 disable the default "tags" and "categories" taxonomies, but since Org mode tags
461 directly translate to the default Hugo taxonomies, it makes sense to just use
462 the default taxonomies for now.
463
464 As an example of taxonomies, I'll add some tags and categories to our
465 *hugotest.org* file to create a complete blog structure with tags and categories:
466 #+begin_src org -n
467 #+hugo_base_dir: .
468 ,* Homepage
469 :PROPERTIES:
470 :EXPORT_HUGO_SECTION:
471 :EXPORT_FILE_NAME: _index
472 :EXPORT_HUGO_MENU: :menu "main"
473 :END:
474 This is the home of my blog!
475 ,* Blog Posts
476 :PROPERTIES:
477 :EXPORT_HUGO_SECTION: posts
478 :END:
479 ,** My Blog Homepage
480 :PROPERTIES:
481 :EXPORT_HUGO_MENU: :menu "main"
482 :EXPORT_FILE_NAME: _index
483 :END:
484 Man, look at all my blog posts.
485 ,** One Bad Night :@updates:herpes:fear:
486 :PROPERTIES:
487 :EXPORT_FILE_NAME: bad-night
488 :END:
489 Someone gave me herpes! Oh no!
490 ,* Fishsticks
491 :PROPERTIES:
492 :EXPORT_HUGO_SECTION: fishsticks
493 :END:
494 ,** Fishsticks Home
495 :PROPERTIES:
496 :EXPORT_HUGO_MENU: :menu "main"
497 :EXPORT_FILE_NAME: _index
498 :END:
499 This section devoted to Orson Wells, R.I.P.
500 ,** Van De Camps :@reviews:fear:
501 :PROPERTIES:
502 :EXPORT_FILE_NAME: van-de-camps
503 :END:
504 If this is fish, I'll be a monkey's uncle.
505 ,** Gortons :@reviews:herpes:
506 :PROPERTIES:
507 :EXPORT_FILE_NAME: gortons
508 :END:
509 I think these gave me the herpes.
510 #+end_src
511 Exporting *hugotest.org* with ~C-c C-e H A~ and generating with ~hugo~ will yield
512 the same file structure as before, but this time we'll see that the categories
513 and tags directories have sections for our newly added taxonomies.
514 #+begin_src
515 .
516 └── public
517 ├── categories
518 │   ├── index.html
519 │   ├── index.xml
520 │   ├── reviews
521 │   │   ├── index.html
522 │   │   └── index.xml
523 │   └── updates
524 │   ├── index.html
525 │   └── index.xml
526 └── tags
527 ├── fear
528 │   ├── index.html
529 │   └── index.xml
530 ├── herpes
531 │   ├── index.html
532 │   └── index.xml
533 ├── index.html
534 └── index.xml
535 #+end_src
536 The index pages of taxonomies provide a list of all available taxonomies of that
537 type, each with list pages that show all content associated with them. This
538 allows themes to easily build navigation pages for browsing or querying
539 taxonomies. Files like these are often useful to output as JSON (done by the
540 theme) to allow Javascript-driven dynamic search features, but a simpler scheme
541 can output HTML pages to browse taxonomies just as you would posts in a section
542 (i.e. Org mode heading).
543
544 **** Serving Content
545 You can now serve the *public/* directory over an HTTP server. Hugo is packaged
546 with an internal [[https://gohugo.io/commands/hugo_server/][HTTP server]] to help with testing, which is quite convenient
547 because it can automatically refresh whenever content in its *content/* directory
548 is updated (so when you export from ox-hugo, you don't have to run ~hugo~
549 again). To use it, simply run ~hugo server~ and point your browser at
550 http://localhost:1313 (1313 is the default ~--port~ argument for ~hugo server~).
551
552 *** Additional Information
553 Eventually you'll want to move on to [[https://themes.gohugo.io/][other themes]], or [[https://gohugo.io/themes/creating/][develop your own]], but at
554 this point you've got a fully functional blog publishing workflow from start to
555 finish that you can view in-browser as you develop.
556
557 **** Attaching Files, Capturing Information & Automation
558 Once you have a basic site structured in your Org file, you're ready to start
559 throwing information in it. It is of course sufficient to open the Org file and
560 edit it, but most Org mode users prefer to automate /everything/, and being able
561 to use Org's capture feature to instantly populate new blog posts is extremely
562 convenient.
563
564 The [[https://ox-hugo.scripter.co/][ox-hugo documentation]] provides succinct explanations on how to do this,
565 including elisp snippets for [[https://ox-hugo.scripter.co/doc/org-capture-setup/][capture setup]], [[https://ox-hugo.scripter.co/doc/images-in-content/][image linking]], and [[https://ox-hugo.scripter.co/doc/auto-export-on-saving/][automating
566 exports]] when you save your Org file (so no more need to ~C-c C-e H A~ every
567 time, just save the file as usual with ~C-x C-s~).
568
569 **** Indexes and Page Resources
570 You may be wondering why our index pages are exported as *_index* rather than
571 *index*. Hugo uses a concept called [[https://gohugo.io/content-management/page-bundles/][Page Bundles]] to organize exported
572 content. The gist of this is that a file named *index* is known as a "Leaf Node"
573 and cannot have any children. A file named *_index* is considered a "Branch
574 Node" and allows nesting other bundles beneath it. In other words, an Org
575 heading with an exported file name of *index* will be treated as a single page
576 with no subfolders. This is useful for single pages, but a section index
577 (e.g. for a blog) with many subpages and other resources will more than likely
578 want to allow nested bundles beneath it.
579
580 You may export an Org heading as a Page Bundle by providing the Org property
581 ~:EXPORT_HUGO_BUNDLE:~ with an argument (string) that will become the name of
582 the folder created. If you do this, you will need to set the
583 ~:EXPORT_FILE_NAME:~ property to either *index* for Leaf Nodes, or *_index* for
584 Branch Nodes.
585
586 The [[https://ox-hugo.scripter.co/doc/org-capture-setup/][capture setup]] provided by Kaushal Modi above provides methods to
587 automatically create either a normal page, or a leaf node bundle when invoking
588 Org Capture.
589
590 **** Drafts and Automatic Timestamps
591 By default, Hugo will not build any markdown files whose front-matter properties
592 include ~draft: true~. This is very convenient for in-progress posts that you
593 leave in your Org file, or in the *content/* directory. If you are using
594 archetypes (which define default front-matter for various resource types, and
595 may include Hugo templating directives), you can see that the primary archetype
596 in *archetypes/default.md* set the draft property to true on all content unless
597 the markdown file overrides this behavior:
598 #+begin_src markdown
599 ---
600 title: "{{ replace .Name "-" " " | title }}"
601 date: {{ .Date }}
602 draft: true
603 ---
604 #+end_src
605
606 Ox-hugo will always fill out the draft property, overriding this archetype's
607 default value. By default, every exported header will have its draft property
608 set to *false*. However, ox-hugo conveniently links this behavior to the TODO
609 feature of Org. When you cycle a heading's TODO value with ~S-<RIGHT>~ (that's
610 Shift + Right Arrow Key), you will signal to ox-hugo to export this heading as
611 a draft (i.e. ~draft: true~), which will prevent Hugo from building it into an
612 HTML page.
613
614 Better still, when a heading is cycled to the DONE state in Org, it will
615 automatically generate a timestamp for when the heading was closed. Ox-hugo will
616 export DONE headings with ~draft: false~ and, better still, will use Org's
617 timestamp to fill out the Date property in the markdown file. This makes it
618 trivial to manage writing multiple posts at once, and automatically timestamp
619 completion dates.
620
621 You may also explicitly set this date parameter with the ~:EXPORT_DATE:~
622 property, but the convenience of using DONE-state switching is pretty hard to
623 pass up.
624
625 **** Renaming Tags and Other Properties
626 If a theme you are using has any idiosyncrasies about your naming conventions
627 (e.g. if you export your content to more than one site using more than one
628 theme), ox-hugo provides a [[https://ox-hugo.scripter.co/doc/replace-front-matter-keys/][convenient way]] to automatically replace any key
629 values on export. This can be done on a per-heading, or a per-file basis.
630
631 To replace keys for the entire file, simply add a property to the top of your
632 Org file. For example:
633 #+begin_src org
634 #+hugo_front_matter_key_replace: description>summary
635 #+end_src
636 This will make any ~:EXPORT_DESCRIPTION:~ properties export, instead, to a
637 "summary" key in the front-matter of your output markdown file. It will also be
638 able to replace exported values in the Org body:
639 #+begin_src org
640 ,#+begin_description
641 This is the description, but will export as the Summary value in front-matter
642 ,#+end_description
643 #+end_src
644 To do this on a per-heading basis, simply add the
645 ~:EXPORT_HUGO_FRONT_MATTER_KEY_REPLACE:~ property to a heading's property block,
646 and the replacements will only occur within that heading.
647
648 ** DONE I did a blog :blog:org:emacs:hugo:
649 CLOSED: [2018-04-06 Fri 18:29]
650 :PROPERTIES:
651 :EXPORT_FILE_NAME: ox-hugo
652 :EXPORT_HUGO_CUSTOM_FRONT_MATTER: :heading "Exporting to Hugo's Blackfriday Markdown from Orgmode"
653 :EXPORT_HUGO_CUSTOM_FRONT_MATTER+: :header /img/org.png
654 :END:
655 ox-hugo is an [[http://en.wikipedia.org/wiki/Emacs][Emacs]] package for [[http://en.wikipedia.org/wiki/org-mode][Org mode]] that produces input for the static
656 content generator [[https://gohugo.io/][Hugo]], which I use for this website. Today I integrated its
657 expectations about file structure into the Speedy theme for this blog, allowing
658 me to keep all blog contents in a single Org mode file and export [[http://en.wikipedia.org/wiki/markdown][markdown]]
659 content for Hugo's excellent [[https://github.com/russross/blackfriday][blackfriday markdown parser]] (a markdown format with
660 many added features). Hugo does support limited parsing of org files internally,
661 but Org mode features like inline spreadsheets and system communication are
662 beyond the scope of most external tools, so Org mode is best used as an
663 exporter. As an Emacs user, this allows me to instantly capture interesting
664 information I come across and publish it within seconds. Now I have no excuses!
665
666 * Forth
667 :PROPERTIES:
668 :EXPORT_FILE_NAME: _index
669 :EXPORT_HUGO_MENU: :menu "main"
670 :EXPORT_HUGO_SECTION: forth
671 :EXPORT_HUGO_CUSTOM_FRONT_MATTER: :heading "Highly Factored Code"
672 :EXPORT_HUGO_CUSTOM_FRONT_MATTER+: :header /img/forth.png
673 :END:
674 This is where I post my watForth programs.
675
676 At present, my forth testbed is located at https://forth.kengrimes.com
677
678 * Code Repositories
679 :PROPERTIES:
680 :EXPORT_FILE_NAME: _index
681 :EXPORT_HUGO_MENU: :menu "main" :title Git
682 :EXPORT_HUGO_SECTION: git
683 :EXPORT_HUGO_CUSTOM_FRONT_MATTER: :header /img/git.png
684 :END:
685 <iframe height="600px" width="100%" frameborder="0" scrolling="no" src="/gitweb" onload="resizeIFrame(this)">
686 <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
687 <a href="https://git.kengrimes.com">https://git.kengrimes.com</a>
688 </iframe>
689
690 * About
691 :PROPERTIES:
692 :EXPORT_HUGO_SECTION: about
693 :EXPORT_HUGO_MENU: :menu "main" :title About
694 :EXPORT_HUGO_CUSTOM_FRONT_MATTER: :heading '("Ken Grimes" "Computer Scientist" "At Large")
695 :EXPORT_HUGO_CUSTOM_FRONT_MATTER+: :header /img/home.png
696 :EXPORT_FILE_NAME: _index
697 :END:
698 Hi! I'm Ken, a 34-year-old computer scientist currently living in Irvine,
699 California. This is a website I've constructed for the purpose of developing
700 web-facing software. I will probably blog with it once development is
701 complete. In the mean time, if you're curious, this is my [[file:static/cv.pdf][curriculum vitae]]
702