Hugo and droppy, Chromebook friends

droppy logo

If you read the post on Hugo + gulp = Chromebook awesomeness then you know that there are a lot of steps in it, and a lot of parts moving to make the solution work. While it does meet the need I noticed that it’s a little much for daily use. That’s really where droppy comes into the picture. It runs on Raspberry Pi’s, so its light weight, and has a great interface - best of all it has a code editor built right in!

Using droppy on the Chromebook is really has a natural feel too. Since it’s web app you have all the goodies that come with those. Its very easy to install and best of all the editor has many of the Sublime Text features I love.

Installation

To install droppy you’ll need to have Termux installed on your Chromebook. Then follow the instruction from the GitHub page:

sudo npm install -g --production droppy

Then to run it type:

droppy start -c /srv/droppy/config -f /srv/droppy/files

That’s it - you’ve got droppy running. Keep in mind you won’t go to localhost, but the IP address that you Termux is running at. For example mine is at 100.115.92.2

Keep in mind the first time you launch droppy it will prompt you to create a user and password. For network installations that is super important, but for running it on your Chromebook it’s not really needed. After logging in you can simply tell it to remember you to avoid that screen.

Running droppy often

While $ droppy start -c /srv/droppy/config -f /srv/droppy/files is not that hard to type, I’m a lazy coder so I wrote a shell script to run droppy.

droppy.sh
droppy start -c $HOME/storage/files/config -f $HOME/storage/files

Note: In my shell script I’m saving the configuration file to a place where I can see it within droppy.

Running Hugo

Again shell scripts are your friend, I generally put a script into each Hugo project. This lets me have a simple reusable script.

hugo.sh
# Run hugo without updating / reinstalling
export GOPATH=$HOME/go;\
export PATH=$PATH:$GOPATH/bin;\  
hugo server --bind="0.0.0.0" --baseURL="http://100.115.92.2" --disableFastRender  --buildFuture --buildDrafts

Hugo-on-android (initial code comes from here), and if your looking on how to build Hugo for a Chromebook check out the Resetting My Chromebook Back to Stock post.

Links to the other posts in the Hugo series

  1. Running Hugo on Chromebook
  2. Resetting My Chromebook Back to Stock
  3. Hugo + gulp = Chromebook awesomeness
  4. Serverless dynamic content with Hugo and JavaScript
  5. Adding search to Hugo with elasticlunr
  6. Hugo + SHH - gulp = a new workflow
  7. Hugo and droppy, Chromebook friends

To run this script at the same time as the droppy script I simply open another session in Termux and run the script there and Hugo is good to go.  Again like we discussed in some of the other Hugo posts since Android apps are isolated the saving commands between Chrome and them can get wonky. Running droppy puts you into the Android container, so saves are smooth and fast. Best of all your not saving doubles of every file as in the Hugo + gulp post.

Building droppy

The best part of open source projects is adjusting it for your needs. One of the things that I can’t live without is spell check - trust me. Out of the box droppy does not have it - and that’s probably good 90% of the time.  Luckily droppy uses Code Mirror for it’s editor, so anything it can do droppy can too! All you need to do is enable it (or grab my fork of the application) located here if you want the code to do it.

droppy has an amazing build system, it minifies everything so that it runs fast on low powered hardware. The problem there is at least on a Chromebook in Termux the build process has a little heartburn - so you might want to jump on a Windows, Mac or Linux machine to do your builds. The really cool thing there though is that it supports live reloading!

Using it

droppy has a very intuitive interface. At the top of the window there are the file and folder options, then there is a great navigation bar, which lets you know exactly where you are. Honestly many other on-line file hosting services could learn something from droppy’s interface.

File Browser

The we get to the main draw of droppy - for myself at least, and that is actually interacting with the files. It has the image, video, and music integrations in it which all work well, but the built in code mirror integration is just awesome. Out of the box droppy supports my goto Sublime Text such as multiple cursors, many of the line features such as remove, comment, and duplicate.

Multi Cursors

Another feature that I really like on droppy is the dual screen view. This allows for side by side file viewing - for folks who don’t code this won’t seem like much, but its something that is missing from many Chromebook editors. Lastly on the major features of droppy is that it has support for many different editor themes which make writing code in it a joy on the eyes.

Split Screen

Overall

droppy is now a primary part of my workflow for writing posts and even code on the Chromebook. While I cannot interact with the files in the Chromebook file system it’s not that big of a loss. It’s simple and fast, which makes it a great tool for Chromebooks or really any platform where you need a consistent tool.