Merge pull request #7 from HugoLnx/v1/google-secret-key

V1/google secret key

.github/workflows/main.yml

@@ -27,6 +27,8 @@ jobs:
 
       - name: Build Vike
         run: npm run build:prod
+        env:
+          VITE_GOOGLE_SITE_VERIFICATION: ${{ secrets.VITE_GOOGLE_SITE_VERIFICATION }}
 
       - name: Deploy
         uses: JamesIves/github-pages-deploy-action@v4

README.md

@@ -45,6 +45,15 @@ You can fork it and use, but please keep the credits at the footer.
 2. Make code changes and watch the browser reload automatically.
 
 
+### Deploy
+1. Configure Github Pages to deploy from the branch `gh-pages`.
+![screenshot](docs/github-pages-config.png)
+
+2. Push to `main`.
+
+3. Check if your deploy succeeded in your [Repository's Actions Page](https://github.com/HugoLnx/hugolnx.github.io/actions).
+
+
 ### Tasks
 
 * Emulate final build being served
@@ -71,6 +80,14 @@ npm run build
 
 The built files will be placed in the `dist` folder. You can deploy the contents of this folder to your web server.
 
+### Google Search Console
+You can verify your website on Google Search Console via metatag verification. To test that, put
+your metatag token (generated by google) into `.env` file as the env var `VITE_GOOGLE_SITE_VERIFICATION`.
+Then, when you run serve the app it should have the metatag there.  
+
+To make it work in github pages you just need to register `VITE_GOOGLE_SITE_VERIFICATION` at your github repository
+as a secret.
+
 ### License
 
 This project is licensed under the GNU General Public License v3.0. You can find the full text of the license [here](https://www.gnu.org/licenses/gpl-3.0.en.html).

src/components/PageHead.vue

@@ -25,13 +25,18 @@ const {
     socialImage,
 } = data;
 
-const metatags = {
+const rawMetatags = {
     viewport: 'width=device-width, initial-scale=1',
     'og:title': title,
     'og:description': description,
     description,
     'og:url': pageUrl,
     'og:site_name': mainTitle,
     'og:image': socialImage,
+    'google-site-verification': import.meta.env.VITE_GOOGLE_SITE_VERIFICATION,
 };
+
+const metatags = Object.fromEntries(
+    Object.entries(rawMetatags).filter(([, content]) => content),
+);
 </script>