Jekyll-Markdown: Add voting to a Blog Post - How to Part 1


A Detailed How-To on adding voting to a Jekyll Markdown Blog Post using an Azure Function and Azure Blob Storage. Part 1: Setting up the Azure Function and Blob Storage.

  1. Clone the repository djaus2/VotesJekyllMarkdown
    • Use this as a starting point for your own implementation.
    • You will need to apply some configuration settings to make it work for your own Azure Function and Blob Storage.
  2. Choose a unique project name YOUR_PROJECT_NAME for the `VotesSurveyFn’ Azure Function project.
    • This needs to be unique within Azure as the functions URL will be https://YOUR_PROJECT_NAME.azurewebsites.net/api/emoji
    • Change the project name in the Azure Function code and configuration accordingly as well a change the two VotesFolderFn folder names in the repository accordingly. You will need to rename the solution file as well and edit it to point to the renamed project by changing its folder name.
    • You may wish the change the API name, emoji but this change is not needed. If so you will need to rename the emoji class and emoji.cs in the Azure Function project as well as change any references to it in the blog post code. - Look for now ee will use:
      • http://localhost:7050
        • The port 7050 is defined in launchSettings.json in the Azure Function project.
      • http://localhost:7050/api/emoji
      • http://localhost:7050/api/emoji?code=YOUR_FUNCTION_KEY
        More on YOUR_FUNCTION_KEY later.
    • Later when we deploy to Azure we will use:
      • https://YOUR_PROJECT_NAME.azurewebsites.net
      • https://YOUR_PROJECT_NAME.azurewebsites.net/api/emoji
      • https://YOUR_PROJECT_NAME.azurewebsites.net/api/emoji?code=YOUR_FUNCTION_KEY
        More on YOUR_FUNCTION_KEY later.
    • Also in launchSettings.json add a custom value for ADMIN_SECRET used in the function code to validate admin access when resetting votes. For local testing you can set this to any value you like, e.g., myadminsecret`.
    • Check that the project builds as-is. 😀
    • In
    • Run the Azure Function project locally and check that you get a message displaying the local URL.
      • You should get a response indicating that the function is running.
  3. Choose a unique Azure Blob Storage container name YOUR_CONTAINER_NAME to store the vote counts.
    • I often when wanting to use a generic name lead with, say, my githihub handle.
      • e.g., meGithub2votescontainer to help ensure uniqueness.
    • Create the Blob Storage container in your Azure Storage Account.
      • See the repository djaus2/VotesJekyllMarkdown ReadMe under Usage on how to create the Blob Storage container using the Azure CLI, or see the previous blog post for alternatives.
      • Note that the container name must globally unique and be lowercase.
      • Make a note of the Blob Storage Connection string for your Azure Storage Account as you will need this later as BLOB_STORAGE_CONNECTION_STRING
  4. Update the Azure Function code configuration to use your Blob Storage container.
    • Update the Azure Function code to use this container name.
      • Look for, and update in the blog code accordingly:
        • YOUR_CONTAINER_NAME
    • Add the Blob Storage connection string as an Environment variable in the Azure Function project settings.
      • Go to ‘launchSettings.json’ in the Azure Function project.
      • Under Environment Variables, update the variable:
        • Name: BLOB_STORAGE_CONNECTION_STRING
        • Value: Your Blob Storage connection string.
    • While you are there give ADMIN_SECRET a custom value for local testing if you have not already done so.
      • This is supplied by the Blog code as part of the Query string code when calling actions in the Azure Function and checked against in the Function code against the know value there as a simple implementation of security.

Test things thus far:

  • Run the Azure Function project and in a browser go to http://localhost:7050/api/emoji
    • You should get a response indicating the count as zero: '{"value":0}' or Pretty Printed: 
      {
"value": 0
}
  • [Get] Try http://localhost:7050/api/emoji?action=get&ns=myblog&key=home
    • You should get a response indicating the count as zero: {"value":0}
  • [Hit] Try http://localhost:7050/api/emoji?action=hit&ns=myblog&key=home
    • You should get a response indicating the count as one: {"value":1}
    • In Azure check the Blob Container and see that a Table MySurveyTallies has been created and has an entry myBlog with a value of 1 as well as MySurveyLogs with a log entry.
      • Ps: Check in emoji.cs where these table names are defined. You can override these with an entry in launchSettings.json if you wish.
  • Try [Get] again, see count of 1
  • Tey [Hit] again. Still count of 1. You can only “vote” once.
  • [Clear] Try http://localhost:7050/api/emoji?action=reset&extent=all&secret=ADMIN_SECRET replacing ADMIN_SECRET with the value you set in the Environment variable in launchSettings.json.
    • You should get a response indicating that the votes have been reset such as:
      {"ok":true,"wiped":"all"}
  • Try [Get] again, see count of 0
  • Experiment with these direct actions to get a feel for how they work. 😀

So far we have:

  • Azure Function Project
    • Unique Azure Function Project Name YOUR_CONTAINER_NAME
    • An API endpoint within the function, eg.emoji
    • ADMIN_SECRET for admin access as an Environment variable, for admin actions such as resetting the Blob tables.
    • Can run locally.
      • Can be accessed locally via http://localhost:7050/api/emoji
      • Or when deployed to Azure via https://YOUR_PROJECT_NAME.azurewebsites.net/api/emoji
  • Azure Blob Storage Container
    • Unique Blob Storage Container Name YOUR_CONTAINER_NAME
    • A connection string BLOB_STORAGE_CONNECTION_STRING as an Environment variable in the Azure Function project settings.
    • Two Blob Tables created when the function is run:
      • Two Table names defined in the Azure Function code.
        • MySurveyTallies
        • MySurveyLogs

Next: Part 2 - Integrating the Azure Function with the Jekyll Markdown Blog Post

C O M I N G !

 TopicSubtopic
   
 This Category Links 
Category:Web Sites Index:Web Sites
<  Prev:   Jekyll-Markdown