There are a couple of different Docker containers that will work for testing your Jekyll site locally on Windows. The first option is the official Jekyll Docker container. With this container you can get up and going with Jekyll by its self or by using the provided pages container. Since GitHub Pages supports Jekyll and has extra packages/components that are available when your Jekyll site is built for GitHub Pages, it is a good idea to use the pages container provided to be sure you are getting the closest match to the GitHub Pages environment.
The second option for Docker containers is one created by Hans Kristian Flaatten. This container uses the github-pages gem that is maintained by GitHub themselves. Using this container will mimic the GitHub Pages enviroment and is very similar to the solution I created using Vagrant to Run Jekyll on Windows because they both use the github-pages gem. This is definitely my preferred way of running my blog locally because I know the environment will be closely mimicking the GitHub Pages environment.
Setting up Jekyll using Jekyll Docker Container on Windows
Visit the local address to view your site! (typically 192.168.99.100:4000 if you are using Docker on Mac or Windows)
note that the above command uses the defualt Jekyll docker container. If you want to use the container desgined for GitHub Pages change the image name to jekyll/jekyll:pages
Setting up Jekyll using the GitHub Pages Container on Windows (recommended if you deploy on GitHub Pages)
Clone or Create your Jekyll Project and move into the root folder of your project where you _config.yml is located.
Run the following command in the console:
$ docker run -v "$PWD":/usr/src/app -p "4000:4000" starefossen/github-pages
Visit the local address to view your site! (typically 192.168.99.100:4000 if you are using Docker on Mac or Windows)
Considerations
Project location for Docker on Windows
Where you create/clone your project on you machine matters other wise you may get permission errors or a note that your configuration file is not found. I found this issue on the Jekyll Docker repository where the project was in the wrong location. On Windows and Mac the Virtual Machine that is created to run Docker mounts the user’s home directory (c:\users\foo) by default. If your Jekyll project does not live in that path then you maybe get an error similar to:
Configuration file: none
Source: /srv/jekyll
Destination: /srv/jekyll/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 0.017 seconds.
Auto-regeneration: enabled for '/srv/jekyll'
Configuration file: none
jekyll 3.0.2 | Error: Permission denied @ dir_s_mkdir - /srv/jekyll/_site
ok: down: /etc/startup3.d/nginx: 1s, normally up
sh: can't kill pid 29: No such process
Upgrading Jekyll
If you have an existing project that is upgrading to Jekyll 3.0 you may need to make a few updates to your Jekyll project _config.yml file to get the project to run properly using GitHub Pages Container. See they details in Jekyll’s upgrade documentation.
Conclusion
It wasn’t strictly necessary to switch to using Docker to run Jekyll and my Jekyll Vagrant box will still work. Choosing to explorer Docker as an alternative was for fun and a learning experience. The world is moving to containerized solutions so it was a good experience running Jekyll in Docker and will make it easy to potentially deploy my blog to another location in the future. As always, I would love to hear your feedback and let me know if you are successful (or not) using this or other solutions to run Jekyll on Windows.
Project Oxford is cool. I am out at a lot of hackathons where I see students creating some amazing applications. While at the hackathons I see students struggling to get started with Project Oxford in their language of choice. Project Oxford is so powerful that I hate to see students struggle getting started so I created a series of videos and sample projects to get them started quickly. But Project Oxford is not only for hackathons and students. Project Oxford has tons of real world applications such as image and video processing, OCR, and text to speech.
By the end of the videos you will have a full working sample and learn a few tricks like using the Kudu Dashboard along the way.
Type choco install elixir (add -y to skip install prompts)
Restart your cmd prompt.
That is it! The last command will not only install the latest version of Elixir but it will install Erlang which is a prerequisite for Elixir. It will also add Elixir to your PATH (if not you can find the commands at C:\ProgramData\chocolatey\lib\Elixir\bin and manually add it) so you can open up a command prompt and type iex to start Elixir’s Interactive Mode.
While debugging your Azure Web App deployments it is sometimes useful to view the files that are deployed to the service. Several situations come to mind. For example, trying to debug your database connection strings or possibly determining which files actually got deployed and where they sit in the file system. Or maybe you need to check if all your dependencies have been installed. Maybe a firewall blocks your FTP access.
But how do you do view the files if you are using a Platform as a Service (PaaS) solution such as Web Apps? PaaS doesn’t set up a virtual machine that you can remote into in the traditional sense and instead abstracts all that complexity away for you. Enter the Kudu Service Dashboard.
What is Kudu?
Kudu is a set of tools and extensibility points for App Service applications. Anytime you set up a git deployment in Azure Web Sites, Kudu is running and managing the deployment. Kudu also allows you to see environment variables, see processes running on the machine, use a cmd console and much more. It also provides a way for you to create extensions for Azure Websites that give you powerful capabilities like Image Optimization or adding Go support.
Simply modify your website URL and by adding scm to it. If you site is http://mysite.azurewebsites.net/, then the root URL of the Kudu service is https://mysite.scm.azurewebsites.net/. Note the added scm token.
Using the Azure Portal. First Navigate to your Web App, Select Tools -> Kudu -> Go:
How to View, Add, Edit, and Remove files in Azure Web App using Kudu
Finally this post was about how you actually view, edit, add, and remove files from the Web App. Once you have your Kudu service Dashboard open you will see some basic information and links for more complex tasks:
View Current Files
View current files in your application by Clicking on Debug Console -> CMD:
Once you are viewing the folder structure you can get to your application home directory by clicking the site folder:
And then the double clicking wwwroot folder:
This is where all your files live. You can even customize this location. In this case, only the default starter HTML page is available but in the case of a larger application there would be many files.
Edit Files
To edit a file click the pencil icon:
Add Files
To add a file you can drag it from your file system to the folder. It is important to drag it directly onto the folder viewer.
Remove Files
Toe remove a file click the minus icon:
Conclusion
It is really simple to use the Kudu Service to view, edit, add, and remove files from your Web App. But as you can see there are a lot of capabilities that Kudu brings to Azure Web apps. Another really useful ability that Kudu gives you is the ability to view log files.
NOTE: This extention is no longer needed. Visual Studio now supports word wrap. The defualt short cut is ALT -Z
I use Visual Studio for most of my development work but I have always had a second editor that was smaller, lightweight and fast, to help accomplish those quick one off edits. A second editor always comes in handy when working on a configuration files, text files or maybe just peeking at code in another project.
I have always used NotePad++ for quick edits because of the speed at which it opens files and I currently use Atom to write my blog posts as it has support for Jekyll. But, as a primarily .NET developer, I find that most of the editors don’t have great out of the box support for C# syntax. Sure I can set it up with great tooling like Omnisharp but that’s an extra thing I have to configure, even if it is made easy with tools.
Visual Studio Code was announced just last year and has had some great momentum as an editor and so I had to take a look at it for my quick editing experience. So far I am very impressed with speed but I also get the syntax highlighting out of the box that I was missing from other editors. There are some other great features it has borrowed from Visual Studio that make it an attractive choice such as IntelliSense, debugging, and Code Lens. Not to mention it is also open source.
Soft wrap in VS Code
VS Code is still in beta so they are adding features all the time. As I have started to use it more often, especially for editing text files and Markdown, I noticed that it was missing a “soft wrap” feature for wrapping lines of text, which made it hard to read long lines without having to scroll.
To enable Soft wrap in VS Code you have to open your user settings file (open command pallet, type ‘settings’, select ‘Open User Settings’) and add the following line:
The default value is 300 and if you take a look at the default settings you will find the following comment which specifies setting the editor.wrappingColumn value to zero will cause a line wrap equivalent to a “soft wrap”:
// Controls after how many characters the editor will wrap to the next line. Setting this to 0 turns on viewport width wrapping
Softwrap the Visual Studio Code Extension
Obviously, manually opening the User Setting file and editing the editor.wrappingColumn value was going to get old quickly. So I did what any programmer would do… automate the process.
The result is Softwrap, an extension for VS Code, that enable you to quickly switch back and for between a “soft wrap” and your more friendly code wrap. Using Softwrap is simple:
Open Command Pallet
Type ‘Softwrap’ in the command window
Hit Enter.
That is it! Softwrap will toggle on/off and preserve the value it was previously set to even if you had a custom value for editor.wrappingColumn already set in your User Settings file. You can check out the source at my GitHub repository.
Softwrap Implementation Notes
Overall I was really impressed with VS Code’s Extension system and documentation. It was only announced about a month ago and yet it is fairly robust and detailed documentation.
Reading and Writing the User Settings File
The limitation I ran into when trying to write to the User Settings file was that there is no VS Code API for it (see github issue). Again, I got a quick response on twitter that this was something that is under consideration but not yet implemented. The suggestion was to directly modify the file itself as a work around.
This was fairly simple to do because VS Code is sitting on top of Electron and we can leverage all the power and infrastructure of Node.js and the strong ecosystem that comes with it. It was easy enough to use the File System module to read/write the User Settings file.
Finding the Settings Files cross-platform
It was not easy to find the location of all the settings files accross each platform. I finally found the documentation here and these two posts on how to work with Node.js cross-platform:
VS Code uses a custom JSON schema that allows comments in the settings file. My current implementation does not support comments and will strip them out. This is probably not the best way to handle the situation but will have to do for now.
Conclusion
Visual Studio Code is a strong candidate for my go to editor when editing quick files. It was very quick to build out an extension for VS Code and the community is there for support.
