How I managed website content with Hugo and text editors


  • Create new post: hugo new posts/
  • Start development server: hugo -D server
  • Edit content in your favorite editor: vi posts/
  • Check grammer in ProWritingAid
  • Validate look and feel of site: http://localhost:1313
  • Publish content: rsync -av --delete ~jemurray/Documents/www-personal/current/



  • Code editor: vi, Visual Studio Code, Textastic, etc.
  • Static website generator: Hugo
  • Hosting: Digital Ocean VSP (small instance)

Create new post

Everything starts out in either a terminal or Visual Code Studio (VSC). In this post, I will switch between iTerm2 and VSC terminals and various editors depending on need.

Open a new terminal in VSC: Terminal -> New Terminal

hugo new

The hugo new command creates a new markdown template under the posts folder:

[email protected]:~/Documents/www-personal/current/ $ hugo new posts/
/Users/jemurray/Documents/www-personal/current/ created
[email protected]:~/Documents/www-personal/current/ $ 

Development Server

To avoid pushing draft data to the live website, Hugo has a built in webserver which renders content locally. This allows the writer to validate the look and feel of the site before going live.

To start the local web server open another terminal in VSC or iTerm and run:

[email protected]:~/Documents/www-personal/current/ $ hugo -D server

                   | EN   
  Pages            | 347  
  Paginator pages  |   0  
  Non-page files   |   0  
  Static files     |  74  
  Processed images |   0  
  Aliases          |   0  
  Sitemaps         |   1  
  Cleaned          |   0  

Total in 219 ms
Watching for changes in /Users/jemurray/Documents/www-personal/current/{content,data,layouts,static,themes}
Watching for config changes in /Users/jemurray/Documents/www-personal/current/
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address
Press Ctrl+C to stop

hugo dev server

Automatic rebuild

The local development server stays running in the background scanning for changes to any files made under the Hugo directory. When a file is changed, Hugo automatically rebuilds the entire site.

In addition to rebuilding the content, the server also reloads the website:

reload website

Side Note, if you look at the html code, the following line performs the website reload:

<script data-no-instant>document.write('<script src="/livereload.js?port=1313&mindelay=10"></' + 'script>')</script>

Edit Content

Nothing special here. Use your favorite editor.

iCloud drives syncs files to all my devices. I regularly switch between vi, visual studio code, and Textastic on mobile.


hugo vi


hugo vsc


hugo textastic

The entire layout looks like this on my desktop. Editor is on top, browser in the background, file browsers for moving images around:

hugo entire screen


ProWritingAid checks the content before publishing.

hugo prowriting

Publishing to the live site

I created a Bash alias to run the rsync command which uploads the website to Digital Ocean:

[email protected]:~ $ grep syncwebsite .bash_profile
alias syncwebsite="hugo && rsync -av --delete ~jemurray/Documents/www-personal/current/"

To upload the site, run: syncwebsite

[email protected]:~/www $ syncwebsite
building file list ... done

sent 98247 bytes  received 21914 bytes  14136.59 bytes/sec
total size is 68175486  speedup is 567.37


Validate the content on the live site:

hugo main hugo posts

comments powered by Disqus