This article is Part 14 in a 14-Part Series.
- Part 1 - Jekyll Part 01: Getting Started
- Part 2 - Jekyll Part 02: Your First Post
- Part 3 - Jekyll Part 03: Adding Commenting to Post
- Part 4 - Jekyll Part 04: Adding Additional Pages
- Part 5 - Jekyll Part 05: Adding Category Page
- Part 6 - Jekyll Part 06: Adding Post by Date Page
- Part 7 - Jekyll Part 07: Adding a custom Google search
- Part 8 - Jekyll Part 08: Using a Custom Domain
- Part 9 - Jekyll Part 09: Installing Jekyll On Windows
- Part 10 - Jekyll Part 10: Installing Jekyll On Linux
- Part 11 - Jekyll Part 11: Installing Jekyll On OSx
- Part 12 - Jekyll Part 12: Editing Locally
- Part 13 - Jekyll Part 13: Creating an Article Series
- Part 14 - This Article
Welcome the continuing series on using Jekyll. In this tutorial we are going to go through how you can validate your link and image references.
As your blog grows and you get more posts, it becomes harder to validate images and links are still valid on older post. On new post it is pretty easy since you only have one last to look for. However, this is a process that can be fully automated so got don’t even have to worry about it anymore.
Since Jekyll is Ruby based we are going to use a ruby gem called html-proofer. Html-proofer is a command line utility that will run a set of tests to validate your HTML output. These tests check if your image references are legitimate, if they have alt tags, if your internal links are working, and so on. It’s intended to be an all-in-one checker for your output.
You can either install the gem as part of your Gemfile or as another ruby gem.
Add this line to your Gemfile
and then execute
or install it yourself, just like any other ruby gems
gem install html-proofer
To generate a report open up the command line and run the command the corresponds to how you install html-proofer.
bundle exec htmlproofer ./_site/ --only-4xx
htmlproofer ./_site/ --only-4xx
The –only4xx parameter above tell it to only reports errors for links that fall within the 4xx status code range. This would capture not found (404) and not authorized (401) errors but would ignore 500 internal server errors. The reason to ignore 500 errors is that we don’t want validation to fail if their web server is throwing an error since we are only testing that the link went some place valid.
You will now get a report of any broken links or image tags. Since html-proofer is evaluating the Jekyll output, you may need to look at some of the include or layout file to fix links.
Once you get the initial set of issues fixed, you will mainly have to worry about the new updates to your blog.
Overall, this will help improve the quality of your blog by ensuring that you fix broken links and images before your users spot them.
- Jekyll Part 01: Getting Started
- Jekyll Part 02: Your First Post
- Jekyll Part 03: Adding Commenting to Post
- Jekyll Part 04: Adding Additional Pages
- Jekyll Part 05: Adding Category Page
- Jekyll Part 06: Adding Post by Date Page
- Jekyll Part 07: Adding a custom Google search
- Jekyll Part 08: Using a Custom Domain
- Jekyll Part 09: Installing Jekyll On Windows
- Jekyll Part 10: Installing Jekyll On Linux
- Jekyll Part 11: Installing Jekyll On OSx
- Jekyll Part 12: Editing Locally
- Jekyll Part 13: Creating an Article Series