Make Gadgets Work

Posts tagged "Ghost"

Right then, the Ghost V1.0 was out a while back and they made Ghost 0.11.x an LTS so I was not in any rush to upgrade too. I have not had much time to sort this out for a while and two days back when I finally came around to check how to upgrade, my first moment of concern was that officially supported stack is for NGINX. I have moved my blog to the Apache Stack on DigitalOcean and while on my sandbox environment I still have NGINX, that is not a place I want to host my blog from. Anyhoo, I realised soon enough that while not officially supported it s easy to bypass the restrictions so I went ahead. The upgrade itself couldn't have been simpler considering the major version bump. The answer to the question "Was it worth it?" is something we will have to wait and see although I am liking what I see except for the initial hiccups. EDITED AFTER THE POST Boy oh boy - just after I finished this post I saw the latest version of Ghost V1.12 is out and it was such a painless process compared to past. Just a simple command 'ghost update' and job done. That itself makes this whole pain kind of worth it. OK so the steps I took are as below: Backup Download and Install Setup Wizard Configure Apache Restore Tweak Backup We will take the back-up from front end for all the posts and we will also backup on the server the entire directory where old instance of the blog is residing. To take backup of all the content and download it in a json file, open your ghost site on a browser, navidate to "Settings" and then click on "Export". Next for the backup of folder on the server itself. To do this issue the following commands on the terminal. #Updateand upgrade the OS repo sudo apt-get update sudo apt-get upgrade #Stop the ghost server pm2 stop Ghost "assuming Ghost is the pm2 id for the site" # Change directory to web-server root cd /var/www/html/"path to your ghost directory say 'ghost' " # Create a new directory for backup sudo mkdir old_ghost_bkp sudo mv ghost old_ghost_bkp # Recreate the ghost directory sudo mkdir ghost cd ghost # Give right privileges to the new directory sudo chown -R <your username>:www-data . Download and Install As we are already in the right directory lets get on with installing the latest version of Ghost using npm. sudo npm install -g ghost-cli #Make sure you are in the directory where new ghost is to be installed. #If you have followed all commands so far, you will already be in #required the directory ghost install It is at this point that you will have to deviate from official guide if you have Apache instead of NGINX. You will be prompted by the installer that it could not find NGINX and do you still want to continue. Default is "No" so make sure you enter "Y" and then press enter. For me rest of the install went smoothly. Setup Wizard Immediately after the install is complete, you will be presented with following questions: Please note that if you have configured SSL using LetsEncrypt as explained in previous posts on this blog then even if you are using https, the answer to blog url must be the with http and not https. For example: I gave and not Enter your blog url: Enter your MySQL Hostname: localhost Enter your MySQL Username: root Enter your MySQL Password: "your mysql root password" Enter your Ghost database Name: "a relevant name - for security reasons you may want to keep it different from your blog name" Do you wish to set up Nginx: no Do you wish to set uo Ghost MySQL User: yes Do you wish to set up Systemd: yes Do you want to start Ghost: yes Please do note that the response on line 6 above to "Setup Nginx" must be "no" After the questions are complete you will get a notification You can access you blog at At this point, it is best to see which port is configured by ghost CLI for this installation. you can do so by checking the configuration file like so: nano config.production.json You can change the port if you like but if it is different than the port you originally had for old version of ghost you can either change it here or you need to change Apache conf file in next step. If you do decide to change the port here, then there should be no need to carry out the next step - Configure Apache. Configure Apache Assuming that the port in Ghost config file was 1234, there will be some changes that you will need to make in Apache conf files like so: cd /etc/apache2/sites-available/ sudo nano ghost.conf Now change the port on ProxyPass and ProxyPassReverse to be same as what is in the config.production.json file and save it by pressing Ctrl+x and y.- so for this example it will be changed to 1234 and change will look as below: ProxyRequests off ProxyPass / http://localhost:1234/ ProxyPassReverse / http:/localhost:1234/ Now open the ssl config file for the site using commands below and make the same changes as above. sudo nano ghost-le-ssl.conf TIP: If done using LetsEncrypt, it will be named something like `ghost-le-ssl.conf`. Once the changes are saved, disable and enable the configurations using following commands: sudo a2dissite ghost.conf sudo a2dissite ghost-le-ssl.conf sudo a2ensite ghost.conf sudo a2ensite ghost-le-ssl #Restart the server sudo service apache2 restart Now if you enter you blog url in a browser, you should be presented with vanilla Ghost site. If not, something in server set-up has not worked and you will need to troubleshoot it and fix - luckily for me all worked like a charm. Restore Right, so you are now on the browser looking at the Vanilla Ghost install. First thing you need to do now is create the user with same credentials you had on your old version of ghost. To do this you will first need to enter the admin url for ghost and follow the steps to create your user. Once you are into the admin interface, navigate to "Settings" -> "Labs" and click on "Choose File" button, select the json backup that was exported from your old version of the blog and then click on "Import" button. Now to restore the images from your old blog on the server issue following commands: cd /var/www/html/ghost/content sudo rm images sudo cp /var/www/html/old_ghost_bkp/ghost/content/images /var/www/html/ghost/content/ ### Make the new image directory is writable or image uploads will fail sudo chown -R ghost:ghost images/ ### Restart Ghost cd .. ghost restart 1. The ghost CLI commands like stop, start and restart will require you to be in the directory where ghost is installed. 2. While start and stop commands of ghost specifically ask for sudo credentials, restart command just keeps rotating and hence it is better to issue a command with sudo before you issue `ghost restart`. This is it. Your old blog is now fully restored. Tweak This section is a bit of a pain because there are quite a few things that break with this version. So if you have heavily used html, you will painstakingly need to go through posts and add a new line between markdown and html content for it to be parsed properly or else it will display quite wiered outputs on your blog. If you have used code blocks with syntax highlighting, another change is with older version you would have given three backticks followed by language-sql but now you just need to give three backticks followed by sql. If you have used line numbering using prism.js, it just wont work and you will need to apply changes to your theme the way I did. Without going too much in detail on that, you can get the copy of prism.js, prism-custom-line-number.js, prism.css, prism-line-number.css using the github links for my theme and place them in assets directory of your theme. Then make sure you include them in relevant files where your theme calls the javascripts. Once done, issue the command ghost restart and things should look pretty again. Happy Migrating !!!

Ghost V1.0 Upgrade on Apache stack, related quirks and fixes

Right then, the Ghost V1.0 was out a while back and they made Ghost 0.11.x an LTS so I was not in any rush to upgrade too. I have not had much time to sort this out for a while and two days back when I finally
While the guidance on Ghost website is very clear, I did get issues that required steps in troubleshooting. Something to do with lodash and npm version 2 stuff (node_modules/knex requires lodash@'^3.7.0') that I read on one of the forums specifically the comment from ErisDS on 13/06. Anyway, reading this I deleted node_modules followed by npm install and it worked. All commands in order as I did are listed below. If my previous posts were used to create the blog nothing here will require sudo or root privileges. As before all this was done on Fedora 24 Linux OS and following commands will need to be changed where it mentions yoursite and username. If the path is different then obviously entire path needs to be replaced. #Copy the entire site as backup. It will be a verbose copy an all access rights will be preserved. cp -avr /var/www/html/yoursite /home/<username>/ #Now in the site directory create a directory ghostlatest mkdir /var/www/html/yoursite/ghostlatest #change directory to ghostlatest cd /var/www/html/yoursite/ghostlatest #now download the latest ghost zip file curl -LOk #unzip the downloaded file unzip #stop your Ghost instance (assuming Ghost is the alias #created as per my previous post else replace with #whatever alias was used with pm2). pm2 stop Ghost #change directory and delete old folders and files cd /var/www/html/yoursite rm -rf core rm -rf index.js rm -rf *.md rm -rf *.json rm -rf /var/www/html/yoursite/content/themes/casper #remove node_modules because anyway the lodash issue will hit later on. rm -rf node_modules #copy from ghost latest to site directory new folders cp -avr /var/www/html/yoursite/ghostlatest/core /var/www/html/yoursite cp -avr /var/www/html/yoursite/ghostlatest/index.js /var/www/html/yoursite cp -avr /var/www/html/yoursite/ghostlatest/*.md /var/www/html/yoursite cp -avr /var/www/html/yoursite/ghostlatest/*.json /var/www/html/yoursite #optional if you haven't made customisation to default theme. cp -avr /var/www/html/yoursite/ghostlatest/content/themes/casper /var/www/html/yoursite/content/themes #Install Latest Version npm cache clean npm update npm install --production #Start to update dependencies npm start --production #Once above command is complete, stop the server and restart using pm2 Ctrl+C pm2 start Ghost

Update Ghost on Fedora

While the guidance on Ghost website is very clear, I did get issues that required steps in troubleshooting. Something to do with lodash and npm version 2 stuff (node_modules/knex requires lodash@'^3.7.0') that I read on one of the forums specifically the comment from ErisDS
The 7 Year Itch It can't possibly be a coincidence that this is the 7th year since I started blogging on blogger and therefore it is very likely to be a strong case of the 7 year itch syndrome but whichever way you look at it, divorce was inevitable given blogger had just stopped inspiring me. I have been fiddling with different blogging platforms while getting accused of neglecting my sweet and loving family...đŸ˜ĸ. Ghost caught my fancy three weeks back. The last post was the beginning of our courtship and this post tells the tale of how a casual fling turned into marital commitment. 😂 To start a fresh blog, choosing any platform is easy and straight forward but to move from one platform to another is - umm... lets just say a very involved process - rewarding but involved. Love can move mountains!!! A complete migration from blogger to WordPress would have been way simpler. I know this as I have done it in past and it appeared like moving to Ghost would require migrating to a WordPress instance anyway. There was - I must admit - a temptation to call WordPress the home but that wouldn't have made a great love-story now - would it? However, the much publicised WordPress route to Ghost migration did not work for me and eventually after a lot of manual copying, pasting, cleaning, pruning, hiding, reading and learning later, the self-hosted blog is all complete. My first baby with my new found love - Ghost - all ready and set to meet the world at large !!! 😃 So story below will take you through ups and downs of a love affair that I hope will last for a life-time (or for a very long foreseeable future at the very least...😍). Install Ghost Install a theme Configure the theme Enable commenting on the blog with DISQUS Migrate content from blogger Redirect Traffic from old blog Migrate comments from old blog Enable Search for your blog Enable Social Links Install Ghost This is covered in my last post. Once it was installed, I took some time exploring and learning Markdown. Last post was my first one using Markdown and it was a very pleasing experience indeed. That nice experience paved way as well as helped me finalise the decision to go the whole nine yards. Install a theme There are some very beautiful themes available on Ghost Marketplace. I have used the theme called scrawl and then tweaked it a bit. Once I found the theme I liked, I downloaded the zip file, unzipped it and deleted the zip file like so. #Download curl -L -o #unzip unzip -o #Delete zip file rm #restart Ghost pm2 restart Ghost Theme is now installed. Configure the theme The first thing I wanted to configure on my new theme was the code block. Prismjs is the way to go and it is already included in the theme I downloaded but the line numbering was not there. After reading a bit on PrismJS website, I understood that core css file from prism did not have this and also I wanted the dark theme so I downloaded the "okadia" theme css along with line number plugin. I then replaced the content of /var/www/html/site-name/content/themes/scrawl-master/assets/css/prism.css with the content in downloaded CSS. Next thing I wanted to change was the header background colour and also the link colour. While it was very close to what I wanted, my actual liking is for the colour #F2C20F and a bit darker link colour #B710EF. To do this I edited the _global_styles.scss like so: #change directory cd /var/www/html/site-name/content/themes/scrawl-master/sass/partials /#Edit _global_styles.scss nano _global_styles.scss Now change the colour of $primary-colour and also add $link-colour. After this your /* Colour */ section will look as shown below: /* Colours */ $primary-colour: #F2C20F; $secondary-colour: #254E70; $tertiary-colour: #FF4B3E; $font-colour: #011627; $background-colour: #EFEFEF; $link-colour: #B710EF; Then I changed directory using cd /var/www/html/site-name/content/themes/scrawl-master/assets/css and opened index.css and post.css where I changed the background-color property to #F2C20F as shown below: nano index.css /** MIXINS **/ .blog-title-background { background-color: #F2C20F; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } nano post.css /**line 86/434 (19%), col 22/29**/ .blog-title-background { background-color: #F2C20F; width: 100%; } Enable commenting on the blog with DISQUS Using DISQUS to enable comments is extremely simple especially on scrawl - the theme I have used and is as explained under the DISQUS section of the theme website: To enable commenting: I created an account on Disqus. Then I created a "channel" for this blog in DISQUS using steps below: Open DISQUS and click on "Get Started" to sign-up Once the sign-up was completed, email verified etc, I went to channels link on home page of disqus and created a channel say thetestchannel Copied the following code into the blog header code injection: <script>window.__themeCfg.disqusUsername = 'thetestchannel';</script> thetestchannel in code above must be replaced with the name of the channel created on DISQUS. Migrate content from blogger Now, this was the most painful of all the things I had to do - the moving of mountain if you like - because the automated solution using Blogger2Ghost just wouldn't work for me. So I basically copy pasted most of the content from blogger over to Ghost and placed the various screenshots manually. If my posts were in 3 digits, I would have persevered and tried contacting someone for help but as it was relatively less content, I just went ahead and did it manually and am glad I did so because that way I was able to do a bit of clean-up too. Redirect Traffic from old blog There are a huge number of posts on www for 301 redirect and what not but I felt, it is only fair to let the redirects land on old blog and users be told there of the new destination so like last step, I manually updated the posts on blogger to just let the reader know that the post they are looking for has moved to new location and link for that post on new site. Not most elegant and efficient approach but I am happy that way. If there are huge entries and one still has to go the manual route, it will save a lot of pain if the permanent link for new posts on Ghost is same as that on old blog and this can be achieved by clicking on clog next to "Save Draft" on the post and changing the "Post URL" Migrate comments from old blog Migrating comments from blogger to DISQUS is very easy. I opened the blogger importing tool which can be accessed using a URL similar to this - However, getting them reflected on new ghost instance has three approaches dependent on the route one takes for redirecting from old blog. As I chose no redirection as such, I had to go for a CSV mapping file between my old and new blog URL per post. Once again, for the number of posts I have this was not a challenge at all but I can't imagine doing such a thing for a big content transfer and it may be worth paying attention to the note in step above if one has huge content to transfer as it will reduce the pain for comments transfer. Enable Search for your blog Ghost recommends Swifttype and the popular site Ghost for beginners provides guidance for Google CSE (Custom Search Engine). I did not like the idea of paying for Swifttype for my small site and Google Search Engine was taking it's sweet time to crawl my site - unlike in past now we cant order / request a crawl and there was ofcourse Google Custom Search watermark which I am not all that fond of. After a bit of searching I came across FreeFind and they have a simple search solution that can be plugged onto a site with a script and HTML. I edited the HTML to match the style of my site colour and then copied the code in fp_header.hbs and post_header.hbs as shown below: Open nano /var/www/html/site_name/content/themes/scrawl-master/partials/fp_header.hbs and paste the following code snippets from freefind site, code in box1 before the code in box2 on freefind site. Then I repeated the same by opening nano /var/www/html/site_name/content/themes/scrawl-master/partials/post_header.hbs The modified HTML for this site is as below: <!-- start of freefind search box html --> <div style="float:right"> <table cellpadding=0 cellspacing=0 border=0 style="position:relative"> <tr> <td colspan=2 style="font-family: Arial, Helvetica, sans-serif; font-size: 20pt;"> <table><tr><td><form id="ffresult_sbox0" style="margin:0px; margin-top:4px;" action="" method="get" accept-charset$ <input type="hidden" name="si" value="some number"> <input type="hidden" name="pid" value="r"> <input type="hidden" name="n" value="0"> <input type="hidden" name="_charset_" value=""> <input type="hidden" name="bcd" value="÷"> <input type="hidden" name="sbv" value="j1"> <input type="text" name="query" style="margin:0.2em;border-color:#F2C20F; border:1px solid #F2C20F;float:left"> </td> <td> <input type="submit" value="Search" style="background-color:#F2C20F; color:white; border:#F2C20F;margin:0.2em"></td></tr></table> </form> </td> </tr> </table> <!-- end of freefind search box html --> </div> On the javascript code, I changed the barcolor : 'navy' to barColor : '#F2C20F',. Enable Social Links This is, much like many other customisations I did, a very theme specific step and for the theme I have chosen it is fortunately very easy to achieve except for linkedin and google+ for which I had to add few lines of code. I achieved this using steps below: Adding already available social icons is very simple and most of the social links are actually available out of the box. So for Tumblr and Instagram all I had to do was open the admin panel of Ghost, click on Code Injection link and paste the following two lines replacing yourusername with my username on that platform. <script>window.__themeCfg.tumblrUsername = 'yourusername';</script> <script>window.__themeCfg.instagramUsername = 'yourusername';</script> For LinkedIn and Google+: Open the footer.hbs using nano /var/www/html/site-name/content/themes/scrawl-master/partials/footer.hbs and pasted the following code under div class footer-container around line 14. <a class="social-button linkedin hidden"><i class="icon-linkedin"></i></a> <a class="social-button gplus hidden"><i class="icon-gplus"></i></a> Then under scripts I added following code around line number 42 case "Linkedin": return "" + username; case "Gplus": return "" + username; Finally under the function revealSocialLinks around line number 69, I pasted the following code: revealPlatform('Linkedin'); revealPlatform('Gplus'); Finally I added the following in the header part of the code injection in front end admin panel of Ghost instance; replacing yourusername with my username for the relevant platform. <script>window.__themeCfg.linkedinUsername = 'yourusername';</script> <script>window.__themeCfg.gplusUsername = 'yourusername';</script> My Learning Curve While there were many insights and learnings, the top 5 I think on the list of learning for me while migrating from blogger to ghost are: Clarity on using Nginx (refer last post.) - Never before have I played around with nginx but having read so many good things about it, I was keen to try and I can say it is indeed living up to all the praise I have read. It is fast and lightweight. Will I use it for production? Ofcourse I will. Will I favour it over Apache - hmm...Maybe... Maybe not. I think I will weigh my options based on what is it I want to achieve but to know about both nginx as well as Apache Server can't hurt. Better Idea of Networking Concepts - With Seafile and Ghost implementation in succession, I actually learnt about quite a few concepts on configuring firewall, DNS, reverse proxy, port forwarding to list a few but more importantly I read a lot about networking and this helped me understand the core concepts involved. Deeper understanding of Web Technologies and inner workings of Ghost - While trying to modify my blog's look and feel to my liking, I had to mess around with CSS, HTML. I have used the theme scrawl by ktweeden and modified it a bit. What attracted me most to it was the fact that it used a default colour theme similar to what I had in mind. I modified it but in doing so got a bit more understanding of how it all ties together - the default.hbs, index.hbs, post.hbs and the underlying handlebar scripts. Markdown - I had some basic idea before I started using Ghost but if I were to use Ghost full-time, I needed to know all there is to know about markdown and while there isn't a lot - it is damn straight forward and simple - it is a very good tool indeed. I am glad I learnt it. CSS plugins - Prismjs comes pre-loaded with scrawl theme but the default skin and plugins were not enough for me so I had to replace these. Now this might be very simple for people in the know. For me it was new and exciting and end result was so cool with numbers in code box and all that. I am obviously very happy with the end result and it did help me learn yet again how things interact within the Ghost platform. The Beginning !!! 😍😃😂

The complete walkthrough of my blogger to ghost migration

The 7 Year Itch It can't possibly be a coincidence that this is the 7th year since I started blogging on blogger and therefore it is very likely to be a strong case of the 7 year itch syndrome but whichever way you look at it, divorce was inevitable given
To install Ghost as my blogging platform, I had to go through a number of hoops and one of them was to get the nodejs working and what not. I figured this might as well be worth documenting in case I have to do this all over again. It might also be helpful for some other inquisitive minds. :) The most useful reference I found was the post on rosehosting website specific to CentOS 7[1] It would have all gone well too; had it not been for the nodejs related issues which resulted in me finding the other helpful pointers from various forums. Anyway, the steps I took to get this all working are: Step 1: Install nodejs and npm Step 2: Install dependencies Step 3: Install npm modules Step 4: Tell Ghost your blog URL Step 5: Start Ghost and nginx These are detailed in my notes below - keeping it, where I can, true to the post I have referred above: Step 1: Install nodejs and npm On Fedora 24 node.js package already includes npm and if you try installing npm separately it will throw an error so just install node.js and npm will be installed along with it. sudo dnf distro-sync sudo dnf install nodejs Step 2: Install dependencies sudo dnf install php php-fpm php-cli php-mysql php-curl php-gd #Create a directory for the website: mkdir /var/www/html/[sitefolder. eg: blog, myblog, banana] #Change to the newly created directory: cd /var/www/html/[sitefolder. eg: blog, myblog, banana] #Set access permissions for this directory chown -R /var/www/html/[sitefolder. eg: blog, myblog, banana] #Download latest version of Ghost: curl -L -o #Unzip the downloaded file unzip #Finally check the directory structure tree -L 2 #OUTPUT of above command should look like as shown below: . ├── config.example.js ├── config.js ├── content │   ├── apps │   ├── data │   ├── images │   └── themes ├── core │   ├── built │   ├── index.js │   ├── server │   └── shared ├── ├── Gruntfile.js ├── index.js ├── LICENSE ├── npm-shrinkwrap.json ├── package.json ├── └── Step 3: Install npm modules While installing/initiating npm modules, there were several errors that system was throwing. They were in two categories: Access Related Dependencies Related Access Related - I was getting EACCES error and solution given on on under Option 2 is what sorted the access issues [1:1]. mkdir ~/.npm-global npm config set prefix '~/.npm-global' nano ~/.profile Add the line export PATH=~/.npm-global/bin:$PATH in the opened file. source ~/.profile Dependencies Related - Some forum hopping later I just followed the advice on Ghost support[1:2] and installed the dependencies. Steps below: #install required dependencies: npm install -g node-gyp sudo dnf install gcc gcc-c++ Once above dependencies are installed following code should just work. NOTE: Make sure you are in the directory you created in step2. #Install PM2 a process manager to control Node.js applications #It will help in keeping specified Node.js applications alive forever: npm install pm2 -g #Install npm install --production #Start Ghost with pm2 and create a name for the pm2 NODE_ENV=production pm2 start index.js --name "Ghost" Step 4: Tell Ghost your blog URL A very simple change is required to config.js file as shown below: #Copy the sample config file cp config.example.js config.js nano config.js File that opens will have following javascript: // # Ghost Configuration // Setup your Ghost install for various [environments]($ // Ghost runs in `development` mode by default. Full documentation can be found$ var path = require('path'), config; config = { // ### Production // When running Ghost in the wild, use the production environment. // Configure your URL and mail settings here production: { url: '', It's the line number 14 in above code block where you need to replace with actual url of your blog. Step 4: Configure Nginx NGINX install and configuration is something I covered in my post for installing Seafile on Fedora 24[1:3]. So I already had a running nginx. I just needed to create a reverse proxy for Ghost on the existing nginx server. Open the hostfile using following command: sudo nano /etc/hosts Now in the hosts file add the localhost alias for blog - in this example it is localhost.localdomain localhost Open the file using following command. NOTE: Replace `yourblog.conf` with your actual blog's conf file name. nano /etc/nginx/conf.d/yourblog.conf On the file that opens copy and paste the following code. NOTE: Replace `` on line number 6 below with alias for localhost for this blog you added to the host file above. upstream ghost { server; } server { listen 80; server_name; access_log /var/log/nginx/ghost.access.log; error_log /var/log/nginx/ghost.error.log; proxy_buffers 16 64k; proxy_buffer_size 128k; location / { proxy_pass http://ghost; proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto https; } } Step 5: Start Ghost and nginx After all the above steps are completed issue following commands to restart ghost and nginx. sudo systemctl restart nginx.service pm2 restart Ghost All Done !!! References: ↩ī¸Ž ↩ī¸Ž ↩ī¸Ž ↩ī¸Ž

Ghost on Fedora 24

To install Ghost as my blogging platform, I had to go through a number of hoops and one of them was to get the nodejs working and what not. I figured this might as well be worth documenting in case I have to do this all over again. It might